NavigationDuplicated: Avoided redundant navigation to current location: “/“.

在写导航切换时点击会有以下报错
在这里插入图片描述
这个报错是是路由中点击路径重复 ,也有可能是安装的vue-router还是之前出错的那个版本,在项目目录下运行 npm i vue-router@3.0 -S 即可。
解决方法1:在 main.js里添加一段代码。
代码如下:

import Router from 'vue-router'
const routerPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return routerPush.call(this, location).catch(error=> error)}

解决方法2:安装

 npm i vue-router@3.0 -S 
 //npm 安装慢 要是有安装淘宝镜像 cnpm安装也可以
这个错误信息: ``` NavigationDuplicated: Avoided redundant navigation to current location: "/index" ``` 通常出现在使用 **Vue Router**(Vue 2 或 Vue 3 的官方路由库)时,当你尝试导航到当前已经处于的路由路径(如 `/index`),而没有使用导航守卫或条件判断进行拦截,Vue Router 会抛出此警告来避免重复导航。 --- ## 🛠️ 原因分析 在 Vue Router 中,从 **v3.1.0** 开始,当你使用 `router.push()`、`router.replace()` 或 `router-link` 尝试跳转到**当前已经激活的路由路径**时,Vue Router 会抛出如下错误: ```js NavigationDuplicated: Avoided redundant navigation to current location: "/index" ``` 这是为了防止不必要的重复渲染和栈溢出问题。 --- ## ✅ 解决方案 ### ✅ 方法 1:捕获错误(推荐) 你可以使用 `.catch(() => {})` 来捕获这个错误,防止它在控制台中报错。 ```js this.$router.push('/index').catch(err => { // 静默处理重复导航错误 console.warn('重复导航:', err); }); ``` 或者使用 async/await 形式: ```js try { await this.$router.push('/index'); } catch (err) { console.warn('重复导航:', err); } ``` --- ### ✅ 方法 2:在跳转前判断当前路径 你可以在跳转前判断当前路径是否已经是目标路径,避免触发导航: ```js if (this.$route.path !== '/index') { this.$router.push('/index'); } ``` --- ### ✅ 方法 3:全局重写 Vue Router 的 push/replace 方法(适用于全局统一处理) 你可以通过原型链重写 `push` 和 `replace` 方法,自动捕获这种错误: ```js // main.js 或 router.js const originalPush = VueRouter.prototype.push; VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => { if (err.name !== 'NavigationDuplicated') { console.error('路由错误:', err); } }); }; // 同理替换 replace 方法 const originalReplace = VueRouter.prototype.replace; VueRouter.prototype.replace = function replace(location) { return originalReplace.call(this, location).catch(err => { if (err.name !== 'NavigationDuplicated') { console.error('路由错误:', err); } }); }; ``` --- ## 📌 总结 | 方法 | 描述 | 推荐程度 | |------|------|----------| | `.catch()` 捕获错误 | 局部处理,适合个别跳转 | ✅✅✅ | | 跳转前判断路径 | 逻辑清晰,避免导航 | ✅✅✅ | | 重写 `push`/`replace` | 全局处理,适合大型项目 | ✅✅ | ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值