NavigationDuplicated: Avoided redundant navigation to current location: "/". at createRouterError (

<think>嗯，用户需要解决VueRouter中的NavigationDuplicated错误，这个报错确实在Vue.js项目中很常见。用户已经收集了几篇引用资料，说明ta可能是个有Vue开发经验的前端工程师，而且正在被这个报错困扰。从引用资料来看，问题核心是vue-router升级到3.1.0+版本后，router.push()方法返回了Promise对象，如果连续两次导航到同一路由且不处理Promise的拒绝状态，就会触发这个警告。用户应该已经试过基础方法但没彻底解决，现在需要更完整的方案。用户给出的资料列举了三种主流解法：1)每次push都写回调(太麻烦)；2)改用query传参(暴露参数)；3)重写push方法(最优雅)。其中引用[3][4][5]都指向方案3，这确实是社区公认的最佳实践。不过用户可能没注意到细节差异，比如是否需要配合replace方法修改。需要给用户补充几个关键点：首先这个错误只是警告不影响功能，其次要注意VueRouter版本差异，最后要考虑TS项目的类型声明问题。用户可能是急着修复线上报错，所以方案要给出可直接复用的代码块。考虑到用户的技术水平，解释时要区分核心原理和实操步骤。先用中文说明本质是Promise未捕获异常，再分步骤给出4种解法：基础版带回调→重写原型→hook拦截→TS适配。特别要强调重写方法时要保留原始函数引用，像引用[4]那样用originalPush变量保存就很专业。用户没提具体环境，但引用[5]显示ta可能在看nuxt方案，所以最后要补充nuxt的特殊处理方式。代码示例里单独给TS类型声明可能多余，但严谨的工程师会需要。</think> 基于引用信息和Vue Router官方实践，解决`NavigationDuplicated`错误的核心方案及原理如下： ### 一、根本原因 Vue Router 3.1.0+ 将 `router.push/replace` 改为**返回Promise**。若连续触发相同路由导航且未处理Promise拒绝状态，会抛出此警告（不影响功能）[^3][^4]。 --- ### 二、最佳解决方案：重写`push`方法 **推荐指数：★★★★★** ```javascript // router/index.js import VueRouter from 'vue-router' const router = new VueRouter({ ... }) // 1. 保存原始push方法 const originalPush = VueRouter.prototype.push // 2. 覆盖原型方法 VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) } ``` **原理**：捕获重复导航产生的错误，阻止控制台警告[^4][^5]。 --- ### 三、其他方案对比 | **方案** | **操作方式** | **缺点** | **适用场景** | |------------------------|---------------------------------------------|----------------------------|-------------------| | **每次添加回调** | `this.$router.push('/path', () => {})` | 需手动添加，代码冗余[^3] | 简单项目 | | **改用query传参** | `this.$router.push({ path:'/path', query })`| 参数暴露在URL[^3] | 不敏感的参数传递 | | **重写replace方法** | 同`push`方案修改`replace` | 需单独处理 | 需要replace的场景 | --- ### 四、高级场景优化 #### 1. Nuxt.js 项目 ```javascript // plugins/router.js export default ({ app }) => { const originalPush = app.router.push app.router.push = function (location) { return originalPush.call(this, location).catch(err => err) } } ``` #### 2. TypeScript类型声明 ```typescript // shims-vue-router.d.ts import { Router } from 'vue-router' declare module 'vue-router' { interface Router { push(location: RawLocation): Promise<NavigationFailure | void> } } ``` --- ### 五、根本预防措施 1. **路由跳转前校验**： ```javascript if (this.$route.path !== targetPath) { this.$router.push(targetPath) } ``` 2. **按钮防抖**：限制连续点击触发多次导航 3. **路由守卫拦截**： ```javascript router.beforeEach((to, from, next) => { if (to.path === from.path) return false // 拦截相同路由 next() }) ``` > ⚠️ **注意**：Vue Router 4.x 已默认捕获此错误，无需额外处理。但仍建议检查是否因重复跳转引发逻辑问题。 ---