vue router 路由跳转失败以 promise reject 形式静默返回，需用 isnavigationfailure 分类捕获处理：aborted/cancelled 重定向或提示，duplicated 可忽略或刷新数据，其他类型应上报；全局 router.onerror 兜底捕获组件加载、守卫异常等未处理错误。
Vue Router 的路由跳转失败不是“报错就崩溃”，而是以 Promise reject 的形式静默返回，必须主动捕获并分类处理。关键在于区分失败类型、在合适位置拦截、按需响应，而不是靠 try-catch 包一层了事。
用 isNavigationFailure 精准识别失败原因
Vue Router 提供 isNavigationFailure 工具函数和 NavigationFailureType 枚举，能明确判断导航中断的语义化原因：
- aborted：导航被用户行为（如快速点击后退）或新导航覆盖而中止
-
cancelled：守卫中返回
false或调用next(false)（如权限不足主动拒绝） -
duplicated：跳转目标与当前路由完全一致（默认不 reject，但配置了
scrollBehavior异常时可能 reject） - redirected：守卫内做了重定向（如未登录跳登录页），这属于预期流程，通常不视为错误
在 push/replace 调用处加 .catch 分类响应
所有 router.push() 和 router.replace() 都返回 Promise，失败时会被 reject。直接在调用处处理最直观、粒度最细：
- 遇到
aborted或cancelled，可引导用户到登录页或提示权限不足 - 遇到
duplicated，一般忽略，或触发当前页面数据刷新 - 其他未识别类型，建议打日志并上报，避免掩盖真实问题
示例写法：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
router.push('/admin').catch(err => {
if (isNavigationFailure(err, NavigationFailureType.cancelled)) {
router.push('/login');
} else if (isNavigationFailure(err, NavigationFailureType.duplicated)) {
// 可选：重新加载当前页数据
} else {
console.error('未知导航失败', err);
}
});
用 router.onError 兜底捕获边界异常
这是全局兜底机制，用于捕获以下场景中未被 catch 的异常：
- 路由组件异步加载失败（如
defineAsyncComponent报ChunkLoadError） - 守卫中抛出同步错误或未 await 的 Promise 拒绝
- 自定义错误（如
throw { code: 'AUTH_REQUIRED' }）
建议在 createRouter() 后、app.use(router) 前立即注册，确保不遗漏任何初始化阶段的异常。
提前预防比事后补救更有效
很多“跳转失败”其实可以避免：
- 按钮加 loading 状态或禁用，防止重复点击触发
duplicated - 对快速连点做防抖，如
debounce(router.push, 300) - 在守卫中统一抛出自定义错误（如
throw { code: 'NO_PERMISSION' }），再由onError统一跳转或提示，让守卫专注逻辑判断 - 确保异步守卫中所有 Promise 都被
await或.catch()，否则可能静默失败
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
