Vue 3 配置 404 页面的核心是精准路由兜底：通配符路由必须用 /:pathMatch(.*)* 且置于 routes 末尾，配合动态参数正则约束（如 /user/:id(\d+)）、beforeEnter 守卫校验、组件内 API 失败跳转及服务端 history 模式重写。
Vue 3 中配置友好的 404 页面，核心不是“统一错误处理”，而是精准的路由兜底 + 服务端配合 + 组件级响应。生产环境尤其要避免只靠导航守卫硬拦截，那容易漏掉动态参数非法、API 返回 404 等真实场景。
通配符路由必须放最后，且用正确语法
Vue Router 4 不再支持 path: '*'，否则直接报错。必须使用官方推荐的 /:pathMatch(.*)* 格式，并确保它在 routes 数组中排在最末位：
- { path: '/admin', name: 'admin', component: () => import('@/views/Admin.vue') }
- { path: '/user/:id(\d+)', name: 'user_detail', component: () => import('@/views/UserDetail.vue') }
- { path: '/:pathMatch(.*)*', name: 'not-found', component: () => import('@/views/NotFound.vue') }
注意：\d+ 中的反斜杠需双写（TS/JS 字符串转义），否则正则不生效；动态路由加正则后，像 /user/abc 就不会命中 user_detail，自然落入 404 路由。
动态参数非法时，靠正则 + beforeEnter 主动拦截
仅靠通配符不够——如果参数格式合法但业务上不存在（如 /movie/999999999），Router 仍会进入组件。这时应在路由定义里加 beforeEnter 守卫做前置校验：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
立即学习“前端免费学习笔记（深入）”；
- 检查参数是否为安全整数、是否在合理范围（比如 ID > 0）
- 不符合条件时，直接返回 { name: 'not-found' }，不进组件
- 避免在组件内才发起请求再判断，减少无效渲染和网络开销
组件内 API 失败时，手动跳转 404
即使参数格式和范围都对，后端也可能返回 404 Not Found（如资源已被删除）。此时需在组件中监听请求结果：
- 使用 onBeforeRouteUpdate 监听参数变化（如从 /movie/123 切到 /movie/456）
- 调用 API 后，若响应状态为 404 或 data 为空，执行 router.push({ name: 'not-found' })
- 可搭配 meta: { hideInMenu: true } 让 404 页面不显示在侧边栏或面包屑中
部署服务器必须重写所有非静态请求到 index.html
生产环境用 history 模式时，刷新 /about 出现 404，根本原因是服务器找不到该路径的物理文件。这不是前端代码问题，而是服务器配置缺失：
- Nginx：添加 try_files $uri $uri/ /index.html; 到 location 块
- Apache：启用 mod_rewrite，添加 .htaccess 规则
- IIS：安装 URL Rewrite 模块，配置 web.config 将所有非文件/目录请求重定向到 index.html
- Vercel/Netlify：默认已支持 SPA，无需额外配置
没这步，用户分享链接或手动刷新，永远卡在 404 —— 前端路由根本没机会运行。
