路由多次执行相同的push|replace报错问题

分析

问题：编程式路由跳转到当前路由（参数不变）。多次执行会出现NavigationDuplicated警告错误？参考链接

• 声明式导航没有这个问题？vue-router底层已经处理好。

• 为什么编程式导航进行路由跳转，会出现这个警告错误？？

"vue-router": "^3.5.3"：最新的vue-router引入promise

let result = this.$router.push({
    name: "search",
    params:{keyword:this.keyword},
    query: { k: this.keyword.toUpperCase() },
},()=>{},()=>{});
console.log(result)//返回值是，Promise对象


function push(){
    let location={name:'HHH'}
    return new Promise(function(location,resolve,reject){
       console.log(location);
resolve()
    })
}
//push是一个promise，promise需要传递成功和失败两个参数，我们的push中没有传递。

/*
 原因：vue-router3.1.0之后, 引入了push()的promise的语法
   如果没有通过参数指定成功或者失败回调函数,就返回一个promise来指定成功/失败的回调。
   且内部会判断如果要跳转的路径和参数都没有变化, 会抛出一个失败的promise
*/
//解决：通过给push方法传递相应成功、失败的回调函数，可以捕获到当前的错误。
//通过底层代码,可以解决这个错误
//解决。
this.$router.push(
    {
        name: "search",
        params: { keyword: this.keyword },
        query: { k: this.keyword.toUpperCase() },
    },
    () => {},
    (error) => {
        console.log(error)
    }
);
//但是，这种写法治标不治本，将来在别的组件中push|replace,编程式导航还是会有类似错误
/*
this:当前组件实例（search）
this.$router属性:当前的这个属性，属性值VueRouter类的一个实例，当在入口文件注册路由的时候，给组件实例添加$router|$route
push：VueRouter类的一个实例，原型对象的方法VueRouter.prototype.push
*/
//原型对象方法
VueRouter.prototype.push=function(){
    //函数上下文为VueRouter类的一个实例
}
this.$router=new VueRouter();

最终解决方案

//先把VueRouter原型对象的push，先保存下
let originPush=VueRouter.prototype.push;
let originReplace=VueRouter.prototype.replace;
//重写push|replace
//第一个参数：原来的push方法，你往哪里跳（传递参数）
//第二个参数：成功回调
//第三个参数：失败回调
VueRouter.prototype.push=function(location,resolve,reject){
  if(resolve|reject){
      //call|apply:都可以调用函数一次，改变改变上下文一次
      //不同点：call和apply传递参数不同，call用逗号隔开，apply传递数组
    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,()=>{},()=>{})
    }
  }