Vue 导航失败「target route is missing」

Vue 导航失败「target route is missing」？3 步教你把路由填齐，跳转立刻成功！

正文目录

1. 报错含义：Vue Router 在挑剔什么？
2. 5 大高频翻车现场 & 修复代码
3. 万能兜底：动态路由与 404 兜底
4. 预防 checklist（不再踩坑）
5. 一句话总结

一、报错含义：Vue Router 在挑剔什么？

当你在控制台看到：

Vue Router: Navigation failed because target route is missing.

Vue Router 在告诉你：
「你调用了router.push()/<router-link>，但路由表里没有这个目标路由。」
本质：目标路由未注册或路径写错。

二、5 大高频翻车现场 & 修复代码

① 路径写错 / 大小写错误

// ❌ 路径不存在router.push('/user/detail')// 实际路由是 /user/:id

修复：对齐注册路径

router.push('/user/123')// ✅ 合法路径

② 动态路由未注册

// ❌ 没有注册 /user/:idconstroutes=[{path:'/user',component:UserList}]router.push('/user/123')// missing

修复：注册动态路由

constroutes=[{path:'/user',component:UserList},{path:'/user/:id',component:UserDetail}// ✅]

③ 命名路由未注册

// ❌ 没有 name: 'userDetail'router.push({name:'userDetail',params:{id:123}})

修复：注册命名路由

{path:'/user/:id',name:'userDetail',component:UserDetail}

④ 动态添加路由未注册

// ❌ 动态添加但未注册router.addRoute({path:'/temp',component:Temp})router.push('/temp')// missing

修复：白名单映射或注册后跳转

router.addRoute({path:'/temp',name:'temp',component:Temp})router.push({name:'temp'})// ✅ 用命名路由

⑤ 路由表异步加载未完成

// ❌ 路由表还没加载完就跳转awaitrouter.push('/new-page')// missing

修复：等待路由加载完成

awaitrouter.isReady();// ✅ 等待就绪awaitrouter.push('/new-page')

三、万能兜底：动态路由与 404 兜底

① 白名单映射（动态路由）

constrouteMap={userDetail:'/user/:id',temp:'/temp'}router.push(routeMap[userAction])// ✅ 白名单

② 404 兜底

constroutes=[{path:'/:pathMatch(.*)*',name:'NotFound',component:NotFound}]

跳转 404：

router.push({name:'NotFound'})

四、预防 checklist

• 所有路由注册完整路径/命名
• 动态路由用白名单映射
• 跳转前核对路径大小写
• 异步路由等待 isReady()
• 控制台「missing」= 立即检查路由表 + 大小写

五、一句话总结

「target route missing」= 路由表里没有目标路径。
对好注册路径、用命名路由、白名单映射，让跳转永远命中，警告瞬间消失！

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

📚 《Vue.js 3企业级项目开发实战（微课视频版》