Vue Router 的 404 页面仅在路径完全不匹配任何路由时触发，通配符路由须为 routes 最后一项且写为 /:pathMatch(.)；动态参数需加正则约束（如 /movie/:id(d+)）；组件内或 beforeEnter 守卫中应主动校验业务有效性并跳转 not-found。

Vue Router 的 404 页面不会自动触发“业务不存在”的场景，比如访问 /movie/a615656 时，只要 URL 结构符合 /movie/:id，就会进入对应组件，哪怕后端返回 404 状态码。真正的 404 匹配只发生在路径完全不匹配任何已注册路由时。

通配符路由必须放在最后且写法规范

Vue Router 4 使用 /:pathMatch(.*)* 作为兜底路由，它只捕获未被其他路由匹配的路径：

• 必须是 routes 数组中的最后一个元素
• 不能写成 /404 或 *（旧写法已废弃）
• 推荐命名用 not-found，避免与 HTTP 状态码混淆
• 确保 name 全局唯一，否则会被后注册的同名路由覆盖

动态参数需加正则约束防误入

仅靠通配符无法拦截格式合法但业务非法的参数（如 /movie/abc），应在路由定义中强化校验：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 纯数字 ID：写成 /movie/:id(\d+)
• 字母数字混合（如 TMDB 的 tt1234567）：用 /movie/:id([a-zA-Z0-9]+)
• 正则必须紧贴参数名，括号内不可有空格
• 不满足正则的路径会直接跳过该路由，交由通配符处理

组件内必须主动校验资源有效性

即使参数格式正确，后端也可能返回 404（如电影已下架）。这时需在组件中判断响应并跳转：

立即学习“前端免费学习笔记（深入）”；

• 使用 useRoute() 获取 params.id
• 请求 API 后检查响应状态码或数据是否存在
• 若失败，调用 router.push({ name: 'not-found' })
• 建议配合 meta.requiresApi: true 标记，便于统一守卫拦截

可选：用 beforeEnter 守卫做前置拦截

对需要强校验的动态路由，可在定义时添加导航守卫：

• 检查 to.params.id 是否为安全整数、是否为空等
• 不符合条件直接返回 { name: 'not-found' }
• 比组件内校验更早执行，避免无意义的 API 请求
• 注意不要和正则重复校验，二者选其一或分层使用