解决vue-router报NavigationDuplicated: Avoided redundant navigation to current location 的问题

本文介绍如何解决在使用Vue-router 3.2.0版本时遇到的冗余导航错误问题,通过在router/index.js中添加特定代码,可以有效避免重复点击路由导致的控制台错误。

最近写项目的时候, 重复点击路由会在控制台报
这样的错误。
在这里插入图片描述

它的提示是 避免到当前位置的冗余导航。 简单来说就是重复触发了同一个路由。
这个错误是 vur-router更新以后新出现的错误。(我使用的是 vue-router 3.2.0)出现的 但是 (vue-router 3.0.6) 没有出现。 但是也不排除是我的 3.0.6之前做过配置。
解决这个错误也非常简单。只需要在router /index的页面里面 加入

const originalPush = VueRouter.prototype.push

VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

这行代码就可以了
他的位置大概在这里
在这里插入图片描述

`NavigationDuplicated: Avoided redundant navigation to current location` 错误通常是因为在 Vue Router 中重复导航到当前所在的路由而触发的。这在嵌套路由中也可能出现,以下是几种解决办法: #### 方法一:捕获路由跳转的错误 在调用路由跳转方法(如 `this.$router.push` 或 `this.$router.replace`)时,捕获可能出现的错误。可以通过 `.catch` 方法来处理路由跳转的错误,忽略 `NavigationDuplicated` 错误。 ```javascript this.$router.push('/notice/feedback').catch((err) => { if (err.name !== 'NavigationDuplicated') { throw err; } }); ``` #### 方法二:重写路由跳转方法 可以在创建路由实例时,重写 `push` 和 `replace` 方法,在内部捕获 `NavigationDuplicated` 错误。 ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; import routes from './routes'; Vue.use(VueRouter); const originalPush = VueRouter.prototype.push; VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch((err) => { if (err.name !== 'NavigationDuplicated') { throw err; } }); }; const originalReplace = VueRouter.prototype.replace; VueRouter.prototype.replace = function replace(location) { return originalReplace.call(this, location).catch((err) => { if (err.name !== 'NavigationDuplicated') { throw err; } }); }; const router = new VueRouter({ routes }); export default router; ``` #### 方法三:在跳转前进行路由判断 在进行路由跳转之前,先判断当前路由是否和要跳转的路由相同,如果相同则不进行跳转。 ```javascript if (this.$route.path !== '/notice/feedback') { this.$router.push('/notice/feedback'); } ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值