Vue Router 导航错误需分类处理：用 isNavigationFailure 区分 aborted、cancelled、duplicated、redirected 四类；push/replace 后 catch 分支处理；router.onError 兜底捕获守卫异常、加载失败等；配合防重、路径判断、try-catch 等预防措施提升健壮性。
Vue Router 的导航错误不是“报错就完事”，而是有明确分类和对应处理路径。关键在于区分失败类型，再决定是忽略、重定向、提示用户，还是记录日志。
用 isNavigationFailure 精准识别失败原因
Vue Router 提供 isNavigationFailure 工具函数和 NavigationFailureType 枚举，能准确判断导航中断的具体原因：
-
aborted：守卫中返回
false或调用next(false)，比如权限不足主动中止 - cancelled：新导航发起时旧导航还没完成，比如连点两个路由链接
- duplicated：跳转目标和当前路由完全一致，控制台会警告但默认不 reject Promise
- redirected：守卫里做了重定向（如未登录跳登录页），这通常不算错误，而是预期流程
在 push 后用 catch 捕获并分类处理
所有 router.push() 和 router.replace() 都返回 Promise，失败时会被 reject。直接在调用处加 catch 最直观：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
router.push('/admin')
.catch(failure => {
if (isNavigationFailure(failure, NavigationFailureType.aborted)) {
router.push('/login')
} else if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
// 忽略，或触发数据 reload
userDataLoader.reload()
} else {
console.error('意外导航失败', failure)
}
})
统一注册全局 onError 处理边界异常
router.onError() 是兜底机制，捕获守卫中抛出的同步/异步错误、组件加载失败、未被 catch 的导航异常等：
立即学习“前端免费学习笔记（深入）”；
- 适合处理 404 页面加载失败、权限校验抛出自定义错误、懒加载组件报错等场景
- 建议在创建 router 实例后立即注册，避免遗漏
- 可配合自定义错误类做语义化响应，比如
throw { code: 'AUTH_REQUIRED' }，然后在 onError 中跳转 /login
router.onError(error => {
if (error?.code === 'AUTH_REQUIRED') {
router.push('/login')
} else if (error?.name === 'ChunkLoadError') {
alert('页面加载失败，请刷新重试')
} else {
console.error('路由级异常', error)
}
})
预防比补救更重要：常见容错写法
很多导航失败其实可以提前规避：
- 重复点击：给按钮加 loading 状态，或用防抖（
debounce(router.push, 300)） - 重复导航：跳转前加路径判断
if (router.currentRoute.value.path !== targetPath) router.push(targetPath) - 守卫内异步错误：确保所有 await 都包裹 try-catch，避免未捕获 Promise rejection
- 通配符路由顺序：把
{ path: '*', component: NotFound }放在 routes 数组末尾，防止误匹配
