做导航栏代码的软件（编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误?）

注意:编程式导航（push|replace）才会有这种情况的异常    
    
    
    
，声明式导航是没有这种问题 


     


     


     


  ，因为声明式导航内部已经解决这种问题    
    
    
    
。 这种异常

 




 




 




 
，对于程序没有任何影响的 


     


     


     


  。 为什么会出现这种现象: 由于vue-router最新版本3.5.2   

   

   

   

，引入了promise  

     

     

     

 ，当传递参数多次且重复


  




  




  




  ，会抛出异常  


  


  


  


，因此出现上面现象,

第一种解决方案

//是给push函数   
     
     
     
，传入相应的成功的回调与失败的回调,可以捕获到当前的错误



   




   




   




   ，可以解决

 




 




 




 
。 this.$router.push( { name: "search", // path: "/search", params: { keyword: this.keyword, }, query: { k: this.keyword.toUpperCase(), }, }, () => {}, //在这里传入成功的回调 () => {} //在这里传入失败的回调 ); //第一种解决方案可以暂时解决当前问题 



 



 



 


，但是以后再用push|replace还是会出现类似现象                   ，因此我们需要从‘根’治病；

第二种解决方案

//重写push和replace方法




    




    




    




   ，在我们的router/index.js下 //重写push和replace方法 //先将VueRouter原型上的push和replace方法备份一份 let originPush = VueRouter.prototype.push let originReplace = VueRouter.prototype.replace //重写 //第一个参数

















，告诉原来push方法你要往哪里跳转（传递那些参数） //第二个参数：成功的回调 //第三个参数：失败的回调 //call和apply的区别 //相同点：都可以调用函数一次                    ，都可以改变函数的this //不同点：传递多个参数时



     



     



     



   ，call传递参数用逗号隔开

















，apply传递一个数组 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, () => { }, () => { }) } } //这样就可以根治掉这个问题了 重写push和replace方法    
    
    
    
，我们需要了解 this是当前的组件实例对象 


     


     


     


  ，当我们在入口文件注册路由VueRouter的时候

 




 




 




 
，会给组件实例添加两个属性   

   

   

   

，一个$route和$router   

   

   

   

。 $router:这个属性  

     

     

     

 ，属性值是VueRouter的一个实例对象


  




  




  




  ，他的身上并没有push方法  


  


  


  


，push方法是VueRouter原型对象上的一个方法,它是借用的VueRouter原型上的push方法 $router是通过new VueRouter 出来的 function VueRouter(){ } push方法是VueRouter原型对象上的一个方法 VueRouter.prototype.push = function({ //函数的this是VueRouter的一个实例对象 })