解决Vue报错: Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current locatio

无废话篇，直接上解决办法

原因：这是因为你多次触发路由跳转事件，且跳转的url地址都是同一个。

解决方法：重写push / replace方法

在入口文件(main.js)中添加

import VueRouter from 'vue-router'
 
const originalPush = VueRouter.prototype.push
   VueRouter.prototype.push = function push(location) {
   return originalPush.call(this, location).catch(err => err)
}
 
const originalReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace(location) {
   return originalReplace.call(this, location).catch(err => err)
}
 
new Vue({
  render: h => h(App)....复制

上面的代码还有第二种写法,实现原理都一样

import VueRouter from 'vue-router'
 
let originPush =VueRouter.prototype.push;
let originReplace =VueRouter.prototype.replace;
VueRouter.prototype.push=function(location,resolve,reject){
  if(resolve&&reject){
    originPush.call(this,location,resolve,reject)    
  }else{
    originPush.call(this,location,()=>{},()=>{})
  }
}
VueRouter.prototype.replace=function(location,resolve,reject){
  if(resolve&&reject){
    originReplace.call(this,location,resolve,reject)
  }else{
    originReplace.call(this,location,()=>{},()=>{})
  }
}
 
new Vue({
  render: h => h(App)....复制

 第二种方式：在push方法后面加上两个参数resolve和reject

this.$router.push('/search/'+this.keyWord)
 
替换成
 
this.$router.push('/search/'+this.keyWord,()=>{},()=>{})复制

废话部分：（解释一下原理）

这个问题是在vue-router在3的版本之后就有的，原因是因为编程式路由在使用push或者replace方法进行路由跳转，底层是使用了ES6中的Promise，每次push或者replace之后就会返回一个promise对象，能够执行回调处理导航成功或者失败的情况。

为什么会报NavigationDuplicated的错误？这其实是Vue Router 提供了一种机制来避免重复导航，从而提高应用程序的性能和稳定性。