面试题：Vue Router 如何配置 404 页面？

在 Vue Router 中配置 404 页面（即“页面未找到”）是构建健壮单页应用（SPA）的重要环节。其核心原理是利用路由的匹配顺序和通配符路由。

配置 404 页面的核心步骤

1. 创建 404 组件

首先，创建一个专门用于显示“页面未找到”信息的 Vue 组件。

<!-- views/NotFound.vue -->
<template>
  <div class="not-found">
    <h1>404 - 页面未找到</h1>
    <p>抱歉，您访问的页面不存在。</p>
    <router-link to="/">返回首页</router-link>
  </div>
</template>

<style scoped>
.not-found {
  text-align: center;
  padding: 50px 20px;
}
</style>

2. 在路由配置中添加通配符路由

在 router/index.js（或 router.ts）的路由配置数组中，将 404 路由作为最后一条规则。使用 path: '*' 来匹配任何未被前面路由规则捕获的路径。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

// 导入页面组件
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import NotFound from '@/views/NotFound.vue' // 导入 404 组件

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  // ... 其他路由规则

  // 404 路由 - 必须放在最后！
  {
    path: '/:pathMatch(.*)*', // 或简写为 '*'
    name: 'NotFound',
    component: NotFound
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

两种通配符写法详解

写法一：`path: '*'` (简单通配符)

语法：{ path: '*', component: NotFound }
特点：
- 最简单直接。
- 匹配任何单个路径段（但不包含 /）。
- 在 Vue Router 4 中，* 会被自动扩展为 /:pathMatch(.*)*。
适用场景：绝大多数情况推荐使用。

冹法二：`path: '/:pathMatch(.)'` (命名参数通配符)

语法：{ path: '/:pathMatch(.*)*', component: NotFound }
特点：
- 使用了命名的捕获组 pathMatch。
- 可以通过 this.$route.params.pathMatch（Options API）或 useRoute().params.pathMatch（Composition API）获取用户实际输入的、未匹配的路径。
- 更加灵活，便于记录日志或进行重定向分析。

完整配置示例

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import User from '@/views/User.vue'
import NotFound from '@/views/NotFound.vue'

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About },
  { path: '/user/:id', name: 'User', component: User },

  // 404 路由 - 放在最后
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: NotFound,
    // 可选：添加 meta 信息
    meta: { title: '404 - 页面未找到' }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

重要注意事项

顺序至关重要：
- 必须将 404 路由放在 routes 数组的最后。Vue Router 按数组顺序进行匹配，一旦找到匹配项就停止。如果 404 路由放在前面，所有路径都会被它捕获，导致其他页面无法访问。
* 和 /:pathMatch(.*)* 的区别：
- 在功能上，两者在捕获“未匹配路径”方面是等效的。
- 使用 /:pathMatch(.*)* 的主要优势是可以获取原始路径，便于调试或分析用户访问了哪些不存在的页面。
SEO 和用户体验：
- 配置 404 页面能显著提升用户体验，避免用户看到空白页或错误。
- 对于 SEO，虽然 SPA 的 404 是前端路由层面的，但仍建议在服务器端也配置真正的 404 HTTP 状态码（例如，当用户直接访问 https://yoursite.com/nonexistent 时，服务器应返回 404 状态码，但 HTML 内容仍为你的 SPA 入口文件，由前端路由接管并显示 404 组件）。
命名路由：
- 给 404 路由命名（如 name: 'NotFound'），便于在代码中进行编程式导航。

如何在组件中获取原始路径（可选）

如果使用了 /:pathMatch(.*)*，可以在 NotFound 组件中获取用户试图访问的原始路径：

<!-- NotFound.vue -->
<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()

// 获取原始路径
const requestedPath = route.params.pathMatch || '/'
</script>

<template>
  <div class="not-found">
    <h1>404 - 页面未找到</h1>
    <p>您访问的页面 "<strong>{{ requestedPath }}</strong>" 不存在。</p>
    <router-link to="/">返回首页</router-link>
  </div>
</template>

总结

配置 Vue Router 404 页面的关键是：

创建一个 NotFound.vue 组件。
在路由配置的最后添加一条通配符路由：
- 推荐写法：{ path: '*', component: NotFound }
- 需要获取原始路径时：{ path: '/:pathMatch(.*)*', component: NotFound }
确保该路由是最后一条规则。

这样，当用户访问任何未定义的路径时，都会被优雅地引导到 404 页面，提升应用的健壮性和用户体验。

THE END

Vue 基础面试题