解决Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location异常

在进行vue开发项目时，会遇到这样的异常：

这个异常其实对程序没有什么影响。出现这个问题是因为重复点击了相同的路由引起的：编程式导航路由跳转到当前路由，参数不变，在多次执行时会抛出Uncaught (in promise) NavigationDuplicated 异常。（声明式导航不会出现这个问题）

异常出现原因

在执行$router.push() 操作时，函数返回的是promise，这里可以在打印看一下：

var a = this.$router.push({name:"search",params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}})
console.log(a);

执行结果：

这是因为promise需要传递一个成功/失败的回调，才能处理这个异常。

解决方案

第一个解决方案：给push方法传递相应的成功、失败回调函数，可以捕获当前的错误。
但是使用这种写法，在别的组件中使用push() 或replace（） 中，还是会有类似的错误出现。

var a = this.$router.push({name:"search",params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}},()=>{},()=>{});
console.log(a);

第二个解决方案（推荐）：
this：当前组件的实例
this.$router：是VueRouter类的一个实例。
push：是VueRouter类的一个实例。
要重写VueRouter原型对象的push方法：在router文件夹下的index.js文件中补充以下代码：

//先把VueRouter原型对象的push保存一份
const originPush = VueRouter.prototype.push
//重写push方法 
VueRouter.prototype.push = function (location,resolve,reject) {//调用保存的push方法//但是保存的push方法是挂载在window的方法 所以要通过call修改this的指向if(resolve&&reject){originPush.call(this,location,resolve,reject);}else{originPush.call(this,location,()=>{},()=>{});}
}

location传的是往哪里跳转。resolve与reject是用户传的成功/失败的回调。这里注意需要用call修改originpush的上下文。
问题解决。