Vue Router重复导航触发NavigationDuplicated是设计性可预期失败，应使用isNavigationFailure精准分类处理，而非字符串匹配或全局压制；推荐在编程式导航处局部catch并按类型响应，配合router.onError捕获真正异常。
Vue Router 重复导航（如点击已激活菜单项）会触发 NavigationDuplicated，本质是 Promise 被 reject，不是未处理异常，而是设计上的“可预期失败”。关键不是压制报错，而是分类识别、按需响应。
用 isNavigationFailure 精准判断类型
别再只靠 err.name === 'NavigationDuplicated' 做字符串匹配。Vue Router 提供了标准工具函数：
-
导入判断工具：
import { isNavigationFailure, NavigationFailureType } from 'vue-router' - 四类常见失败：duplicated（目标即当前）、aborted（守卫返回 false）、cancelled（新导航中断旧导航）、redirected（守卫内重定向）
-
推荐写法：在
router.push().catch()中明确分支，例如：if (isNavigationFailure(failure, NavigationFailureType.duplicated)) { /* 忽略或 reload 数据 */ }
避免全局污染，优先用局部 catch + 分类处理
重写 Router.prototype.push 虽简单，但会掩盖所有重复跳转，不利于调试和特殊场景定制。更推荐在业务调用处主动捕获：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 按钮点击、菜单切换等编程式导航点，统一加
.catch() - 对
duplicated可静默忽略，或触发数据刷新（如列表页重新拉取） - 对
aborted或redirected，可配合权限逻辑做跳转（如推到登录页） - 对其他未识别失败，建议打日志，不吞掉
兜底用 router.onError 捕获真正异常
router.onError 不是用来处理重复导航的，而是捕获守卫中抛出的同步/异步错误、组件懒加载失败（ChunkLoadError）、自定义错误等边界问题：
- 在创建 router 实例后立即注册，例如：
router.onError(err => { ... }) - 可结合自定义错误对象做语义化响应：
throw { code: 'AUTH_REQUIRED' }→ 在 onError 中跳登录页 - 不要在 onError 里处理
duplicated，它不属于运行时异常范畴
从源头减少冗余触发
捕获是补救，预防更高效：
- 菜单项点击前加路径比对：
if (to.path !== router.currentRoute.value.path) router.push(to) - 按钮加 loading 状态或节流（如
debounce(push, 300)），防连点 - 动态路由参数变化时，用
beforeRouteUpdate替代全量重跳 - Element Plus/Ant Design Vue 的菜单组件，可绑定
activeIndex避免重复触发
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
