vue router处理404的核心逻辑是配置末尾兜底路由捕获未匹配路径并渲染自定义页面，需确保通配符路由（如/:pathmatch(.)或*）置于routes数组最后、name唯一、服务端配合fallback，否则将导致匹配失效或刷新404。
Vue Router 处理 404 页面的核心逻辑是：用一条兜底路由捕获所有未匹配的路径，并渲染自定义的提示页面。这不是“错误拦截”，而是路由匹配失败后的正常 fallback 行为，关键在于配置位置、通配符写法和组件加载方式。
404 路由必须放在 routes 数组末尾
Vue Router 按顺序匹配路由，一旦某条规则命中就停止后续查找。如果把 path: '*' 或 path: '/:pathMatch(.*)*' 写在前面，它会提前吃掉所有请求，导致其他页面无法访问。
- ✅ 正确做法：把 404 规则作为 routes 最后一项
- ❌ 错误示例：把它插在 /home 或 /user 中间
- 注意：即使其他路由带参数（如
/user/:id），只要没被前面的规则匹配上，最终都会落到这个兜底项
两种通配符写法要分清适用场景
Vue Router 3 和 4 对通配符支持略有差异，选错会导致 404 不生效或控制台报错。
-
Vue Router 3（Vue2）：用
path: '*'即可，简洁通用 -
Vue Router 4（Vue3）：推荐
path: '/:pathMatch(.*)*'，更语义化且兼容嵌套路由深度匹配 - 两者都需配合命名（如
name: 'NotFound'），方便编程式导航跳转（router.push({ name: 'NotFound' })）
避免因同名路由导致假 404
看似是 404，实际可能是路由注册冲突造成的“匹配丢失”。常见于动态导入或权限路由合并时。
- Vue Router 要求每个
name唯一；重复 name 会导致后注册的覆盖先注册的 - 例如两个
name: 'userDetail'的路由，访问第一个路径时会直接命中兜底页 - 排查方法：打印
router.options.routes，确认目标路由是否还在数组中 - 修复建议：给不同模块的路由加命名空间前缀，如
admin-user-detail、user-profile
刷新页面显示 404？先查服务器或模式配置
开发时能正常跳转，但直接访问 URL 或刷新后报 404，大概率不是路由代码问题，而是部署环境配置缺失。
-
History 模式（默认）：依赖服务器将所有请求返回
index.html，否则 Nginx/Apache 会真实返回 404 -
Hash 模式：URL 带
#，不触发服务器请求，适合无权改服务配置的场景 - 开发阶段可在
vue.config.js配置devServer.historyApiFallback: true解决本地刷新问题
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
