Vue 3动态路由404页面不触发原因及解决

Vue Router 的通配符路由无法捕获已匹配动态路径（如 /movie/a615656）的 404 场景，因其仍满足 /movie/:id 模式；真正有效的 404 处理需结合路由守卫、服务端响应校验与错误重定向三重机制。

这个问题在 Vue 3 和 Vue Router 4 的开发实践中非常典型。许多开发者明明配置了通配符路由，却仍然发现某些“不存在的页面”无法触发 404，原因在于对路由匹配机制的理解不够深入。

在 Vue 3 + Vue Router 4 的单页应用中，通配符路由 /:pathMatch(.*)* 只对完全未被任何路由匹配到的路径生效。它不会干预已被显式定义的路由——例如 /movie/:id 这类动态路由。当用户访问 http://localhost:8080/movie/a615656 时，Router 会认为它成功匹配到了 movie_details 路由，根本不会考虑进入 404 路由逻辑。

因此，若该 ID 在 TMDB API 中实际上不存在，前端必须主动识别错误并手动跳转到 404 页面，而不能依赖路由配置自动兜底。

正确的处理流程：三步走的闭环方案

1. 将通配符路由置于正确位置（基础前提）

通配符路由必须放在所有具名路由之后，并使用 Vue Router 4 的标准语法：

// src/router/index.ts
const routes: RouteRecordRaw[] = [
  { path: '/', name: 'home', component: HomeView },
  { path: '/top-rated', name: 'top_rated', component: TopRatedMoviesView },
  { path: '/movie/:id', name: 'movie_details', component: MovieDetailsView },
  { path: '/actor/:id', name: 'actor_details', component: ActorDetailsView },
  //  必须放在最后，path 为严格通配
  {
    path: '/:pathMatch(.*)*',
    name: 'not-found',
    component: NotFoundView,
    meta: { hidden: true } // 可选，避免出现在菜单
  }
]

注意：有人使用 name: '404' 的方式并不可取——容易与 HTTP 状态码混淆，且 Vue Router 要求 name 全局唯一。建议统一使用 not-found 或 404-page 等含义清晰的名字。

2. 在动态路由组件内部校验资源是否存在（核心逻辑）

在 MovieDetailsView.vue 中，通过 useRoute() 获取动态参数 ID，调用 API，根据返回的响应状态决定是否跳转到 404 页面：

3.（进阶方案）通过全局路由守卫统一拦截（提升一致性）

如果多个动态路由都需要共享这套 404 逻辑，可以在 router.beforeEach 中集中处理：

// src/router/index.ts
router.beforeEach(async (to, from, next) => {
  // 仅对含有 :id 参数的动态路由启用校验
  if (to.name === 'movie_details' || to.name === 'actor_details') {
    try {
      const id = to.params.id as string
      const apiPath = to.name === 'movie_details' 
         ? `/movie/${id}` 
         : `/person/${id}`
      const res = await fetch(`/api/tmdb${apiPath}`).then(r => r.json())
      if (!res.success && res.status_code === 34) { // TMDB 404 的状态码是 34
        next({ name: 'not-found' })
        return
      }
    } catch (e) {
      next({ name: 'not-found' })
      return
    }
  }
  next()
})

需要注意的几个关键点

• 仅靠正则限制 :id 无法解决所有问题：使用 path: '/movie/:id(\d+)' 可以阻止 /movie/abc 这样的路径，但像 a615656 这类字符串仍会被视为合法参数，无法应对业务层面的 404。
• 服务端返回状态才是最终依据：TMDB 的 ID 本身为字符串类型（如 "603" 或 "tt1234567"），前端不能预设其必须是纯数字，应始终以 API 的返回为准。
• 避免重复跳转造成死循环：在 router.push 前，先检查当前路由是否已经是 not-found，防止无限循环。
• 兼顾 SEO 与用户体验：前端展示的 404 页面最好配合服务端（例如 Nginx 的 try_files $uri $uri/ /index.html;）返回真实的 HTTP 404 状态码，而非仅在前端视图上呈现一个假 404。

总结

/:pathMatch(.*)* 的职责是处理“路径未命中”的兜底，而 /movie/:id 下的 404 是“资源不存在”的业务逻辑错误——两者语义完全不同，必须分层处理。真正可靠的方案 = 通配符路由（兜底非法路径） + 动态组件内的 API 错误捕获（处理资源缺失） + 可选的全局守卫（统一策略）。只有这样，才能确保无论是 http://localhost:8080/movie/999999999 还是 http://localhost:8080/xyz，都能优雅地展示 404 视图。