vue-router.esm.js:2046 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/adm".

### Vue Router 中避免重复导航到当前位置的解决方案 在 Vue.js 使用 vue-router 进行路由管理时，可能会遇到 `NavigationDuplicated` 错误提示。这种错误通常发生在尝试导航至当前已经激活的路由时[^1]。 #### 问题原因分析 当调用 `router.push()` 或其他导航方法时，如果目标路径与当前路径相同，则会抛出 `NavigationDuplicated` 警告。尽管此警告不会影响应用的功能，但它会在开发环境中显示于控制台，可能干扰开发者调试体验[^2]。 --- #### 解决方案一：重写 `push` 方法捕获异常 通过覆盖 `VueRouter.prototype.push` 方法来捕获并处理潜在的错误，从而避免控制台中出现冗余导航警告。以下是实现代码： ```javascript // 导入必要的模块 import Vue from 'vue'; import VueRouter from 'vue-router'; // 安装 VueRouter 插件 Vue.use(VueRouter); // 备份原始的 push 方法 const originalPush = VueRouter.prototype.push; // 替换原有的 push 方法，增加错误捕获逻辑 VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch((err) => { if (err.name !== 'NavigationDuplicated') throw err; console.warn('Redundant navigation detected and ignored.'); }); }; // 配置路由规则 const routes = [ { path: '/', component: () => import('@/views/Home.vue') }, // 其他路由配置... ]; export default new VueRouter({ mode: 'history', routes, }); ``` 这种方法的核心在于利用 `.catch(err => err)` 来阻止未被捕获的 Promise 拒绝状态传播给全局处理器[^3]。 --- #### 解决方案二：条件判断防止重复跳转 另一种方式是在执行导航之前先检查目标地址是否等于当前活动地址。这样可以从根本上避免触发相同的路由切换操作。 ```javascript function safeNavigate(routerInstance, targetRoute) { if (routerInstance.currentRoute.path === targetRoute) { console.log(`Already on route "${targetRoute}", skipping navigation.`); return; } routerInstance.push(targetRoute); } // 示例用法 safeNavigate(this.$router, '/home'); ``` 这种方式更加直观易懂，并且不需要修改框架内部行为即可解决问题[^4]。 --- ### 总结 两种主要策略都可以有效应对 `NavigationDuplicated` 提醒消息： - **重定义 `push` 函数**适用于希望统一处理所有场景下的情况； - **提前验证路径差异性再决定是否继续推进流程**则更贴近具体业务需求定制化程度较高。 无论采用哪种手段都需注意保持代码可读性和维护便利性，在实际项目里可以根据团队偏好和技术栈特点灵活选用合适的方法。