路由导航报错：NavigationDuplicated: Avoided redundant navigation to current location解决方法

合集 - 小菜爆炒(1)

1.路由导航报错：NavigationDuplicated: Avoided redundant navigation to current location解决方法2023-05-18

收起

跳转页面时候，重复点击菜单引起路由重复报错；点击按钮跳转到同一个或当前的路径会报错。

为每一个Promise添加一个回调函数

this.$router.push({
   name: 'Cats',
 }, () => {})

修改VueRouter原型对象上的push/replace方法

在router/index.js文件中添加如下代码

// 获取原型对象push函数
const originalPush = VueRouter.prototype.push

// 获取原型对象replace函数
const originalReplace = VueRouter.prototype.replace

// 修改原型对象中的push函数
VueRouter.prototype.push = function push(location){
return originalPush.call(this , location).catch(err=>err)
}

// 修改原型对象中的replace函数
VueRouter.prototype.replace = function replace(location){
return originalReplace.call(this , location).catch(err=>err)
}