开会员与付费前请必须阅读这篇文章，在首页置顶第一篇：（进站必看本站VIP介绍/购买须知）
本站所有源码均为自动秒发货，默认（百度网盘）
本站所有源码均为自动秒发货，默认（百度网盘）
在 Vue Router 中处理 404 页面（即“未找到”页面）的核心思路是：创建一个专门的组件，并利用通配符路由捕获所有未匹配的路径，将其指向该组件。
由于 Vue Router 的版本（v3 对应 Vue 2，v4 对应 Vue 3）在通配符语法上有所不同，请根据你的项目版本选择对应的配置方式。
1. 核心步骤概览
无论哪个版本，处理流程通常包含以下三步：
- 创建 404 组件：编写一个视图组件（如
NotFound.vue），展示友好的错误提示。 - 配置通配符路由：在路由配置文件中添加一条特殊的路由规则，用于匹配所有未知路径。
- 确保顺序正确：必须将通配符路由放在路由数组的最后，因为 Vue Router 是按顺序匹配的，如果放在前面会拦截所有正常路由。
2. Vue Router 4 (适用于 Vue 3)
在 Vue Router 4 中，旧的
* 通配符已被移除，取而代之的是带正则参数的动态路由。A. 创建组件 (src/views/NotFound.vue)
vue
编辑
1<template>
2 <div class="not-found">
3 <h1>404 - 页面未找到</h1>
4 <p>抱歉，您访问的页面不存在。</p>
5 <router-link to="/">返回首页</router-link>
6 </div>
7</template>
8
9<script setup>
10// Vue 3 Composition API
11</script>
12
13<style scoped>
14.not-found {
15 text-align: center;
16 padding: 50px;
17}
18</style>B. 配置路由 (src/router/index.js)
使用
/:pathMatch(.*)* 语法。这里的 :pathMatch 是参数名（可自定义），(.*) 是正则表达式（匹配任意字符），最后的 * 表示该参数是可重复的（匹配多级路径）。javascript
编辑
1import { createRouter, createWebHistory } from 'vue-router'
2import NotFound from '../views/NotFound.vue'
3import Home from '../views/Home.vue'
4
5const routes = [
6 {
7 path: '/',
8 name: 'Home',
9 component: Home
10 },
11 // ... 其他具体路由 ...
12
13 // 404 通配符路由 (必须放在最后)
14 {
15 path: '/:pathMatch(.*)*',
16 name: 'NotFound',
17 component: NotFound
18 }
19]
20
21const router = createRouter({
22 history: createWebHistory(),
23 routes
24})
25
26export default router注意：如果你希望在 404 页面中获取用户尝试访问的原始路径，可以在组件中通过useRoute()获取pathMatch参数。javascript编辑1import { useRoute } from 'vue-router' 2const route = useRoute() 3console.log(route.params.pathMatch) // 例如访问 /abc/def，这里得到 ['abc', 'def']
3. Vue Router 3 (适用于 Vue 2)
在 Vue Router 3 中，直接使用星号
* 作为通配符。A. 创建组件 (src/views/NotFound.vue)
(代码结构同 Vue 3，只是 script 部分可能使用 Options API)
B. 配置路由 (src/router/index.js)
javascript
编辑
1import Vue from 'vue'
2import Router from 'vue-router'
3import NotFound from '@/views/NotFound.vue'
4import Home from '@/views/Home.vue'
5
6Vue.use(Router)
7
8const routes = [
9 {
10 path: '/',
11 name: 'Home',
12 component: Home
13 },
14 // ... 其他具体路由 ...
15
16 // 404 通配符路由 (必须放在最后)
17 {
18 path: '*',
19 component: NotFound
20 }
21]
22
23export default new Router({
24 mode: 'history', // 或 'hash'
25 routes
26})4. 进阶技巧与常见问题
Q1: 如何重定向而不是显示组件？
如果你不想显示 404 页面，而是想强制跳转到首页，可以使用
redirect 属性。- Vue Router 4:
javascript编辑
1{ 2 path: '/:pathMatch(.*)*', 3 redirect: '/' 4} - Vue Router 3:
javascript编辑
1{ 2 path: '*', 3 redirect: '/' 4}
Q2: 为什么刷新页面会出现真正的 404 (Nginx/Apache 报错)？
如果你使用的是
history 模式（URL 没有 #），当用户直接访问一个不存在的 URL（如 yoursite.com/abc）并刷新时，浏览器会向服务器请求 /abc 资源。如果服务器没有配置重写规则，服务器会返回 404。解决方案：需要在服务器端配置“ fallback ”，将所有找不到文件的请求都指向
index.html，让 Vue Router 在客户端接管并显示你的 404 组件。- Nginx 配置示例:
nginx编辑
1location / { 2 try_files $uri $uri/ /index.html; 3} - Vite/Webpack 开发服务器: 通常默认已处理，但生产环境部署务必检查服务器配置。
Q3: 通配符路由导致嵌套路由失效？
如果在父路由下使用了通配符，可能会捕获子路由。确保通配符路由定义在层级结构的正确位置，或者在父路由内部单独处理。通常建议将全局 404 路由定义在根级别路由数组的末尾。
总结
- Vue 3: 使用
path: '/:pathMatch(.*)*'。 - Vue 2: 使用
path: '*'。 - 关键点: 永远把它放在
routes数组的最后一位。
