点击vue路由跳转，控制台报错：Avoided redundant navigation to current location: “/xxxxxx“解决方法

一、描述问题

在使用this.$router.push跳转页面时候，重复点击菜单引起路由重复报错

比如当前页面显示区是路由组件‘/cats’，重复点击按钮进行this.$router.push跳转，要跳转的组件仍然是‘/cats’，那么控制就会报如下错误：

二、报错原因

由于 vue-router3.0 及以上版本回调形式改成Promise API的形式了，返回的是一个Promise 。也是说 push和replace都是Promise类型了。

而Promise的回调函数resolve和reject，必须传其中一个，否则会报错。如果路由地址跳转相同，且没有捕获到错误，控制台始终会出现上图所出现的问题。

三、解决方法

1、安装vue-router3.0以下版本

先卸载3.0以上版本然后再安装旧版本

npm i @vue-router2.8.0

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

缺点：每个路由跳转都要添加回调函数

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

3、修改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)
}

四、原理分析

const originalReplace = VueRouter.prototype.replaceVueRouter.prototype.replace = function replace(location){return originalReplace.call(this , location).catch(err=>err)
}

location ：一个保存了当前要跳转路径的对象；

call()函数：可以在调用函数的同时改变this的指向，常用于实现继承,
两个参数：
this：由于call处于原型对象内部，所以此处this指向的是当前VueRouter的实例对象；而originalPush指向的是VueRouter.prototype.push，旨在于调用当前VueRouter实例对象中的push方法；
location：在方法调用时传入获取到的location。

catch：链式调用catch方法，目的是在方法执行时，捕获错误。
在js机制中，catch捕获到Exception时，代码还会继续向下执行。所以此处的catch未作任何操作，代码也会继续向下执行，和抛给浏览器的错误其实时一致的

五、额外补充

1、路由导航方式

声明式	编程式
`<router-link :to="...">`	`$router.push(...)`

编程式导航：即 $router.push、$router.replace、$router.forward()、$router.back()、$router.go()

2、Promise函数

① Promise是一个构造函数
可以使用new 创建一个Promise实例 //eg：const p = new Promise()
每一个Promise实例对象代表一个异步操作

② Promise.prototype上包含一个.then()方法
每一个new Promise()构造函数得到的实例对象都可以通过原型链的方式访问到.then()方法 //eg：p.then()

③ .then()方法用来预先指定成功或失败的回调函数
p.then(成功回调，失败回调)
调用.then()方法时，成功的回调函数是必选的，失败回调是可选的

Vue路由导航报错：NavigationDuplicated: Avoided redundant navigation to current location解决方法相关推荐

报错：Avoided redundant navigation to current location: “/login“.完美解决
需求: 登陆之后才能查看主页面,否则跳转至登录页遇到的问题: 一开始是打算直接在拦截器跳转路由的,发现会报错Avoided redundant navigation to current locat ...
vue-router 报错Error: Avoided redundant navigation to current location: “/index/user“解决方式
问题使用ivew Menu 制作的导航菜单,连续点击同一个导航时报错该报错不影响功能当前地址 http://localhost:8080/#/transfer/index 连续点击–信息录入报 ...
解决Vue报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
问题描述:重复点击导航时,控制台出现报错 ,虽然不影响功能使用,但也不能坐视不管. 解决 Vue 重复点击相同路由,出现 Uncaught (in promise) NavigationDuplica ...
解决报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “
报错内容: vue-router.esm.js?68cf:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navi ...
vue 跳转报 NavigationDuplicated: Avoided redundant navigation to current location: “/to-do“.
错误提示:NavigationDuplicated: Avoided redundant navigation to current location: "/to-do". 提示这 ...
vue2里面的Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
编程式导航跳转到当前路由(参数不变),多次执行就会在控制台出现如下结果: 怎么解决: (1)最有效--重写push.replace 在router-index.js中添加: // 重写push.rep ...
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/deta
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: " ...
解决Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location问题
在Vue路由中遇到Error: Avoided redundant navigation to current location:xxxx:错误,意思是路由重复在router文件夹下的index.j ...
vue重复点击路由报错，解决NavigationDuplicated: Avoided redundant navigation to current location: 问题
vue项目中重复加载当前路由会报错, 解决方法:找到项目中的router文件,在里面添加代码,修正Vue原型上的push和replace方法 (注意vue-router的引入名称) // 缓存原型上的 ...
vue编程式导航跳转到当前路由多次执行抛出NavigationDuplicated: Avoided redundant navigation to current location:
为什么? push方法会返回一个Promise对象,内部会进行跳转成功或失败的回调解决方法只需在push方法末尾传递两个成功和失败的回调函数,可以捕获到当前的错误,可以解决.但是此种方法治标不治本 ...

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