[笔记]解决路由跳转时的NavigationDuplicated错误

问题 vue-router编程式路由跳转时出现NavigationDuplicated错误

原因分析

vue-router3.1.0之后, 引入了push()的promise的语法, 如果没有通过参数指定回调函数就返回一个promise来指定成功/失败的回调, 且内部会判断如果要跳转的路径和参数都没有变化, 会抛出一个失败的promise

解决方法

1. 在进行跳转时, 指定两个箭头函数分别为成功的回调失败的回调

   // 指定成功的回调函数和失败的回调
   this.$router.push(`/search/${this.keyword}`, () => {}, () => {})
   

2. 修正Vue原型上的push和replace方法

   //先把VueRouter.prototype身上的push|replace方法进行保存一份
   let originPush = VueRouter.prototype.push;
   let originReplace = VueRouter.prototype.replace;
   //重写VueRouter.prototype身上的push方法了
   VueRouter.prototype.push = function(location, resolve, reject) {
   //第一个形参：路由跳转的配置对象（query|params）
   //第二个参数：undefined|箭头函数（成功的回调）
   //第三个参数:undefined|箭头函数（失败的回调）
   if (resolve && reject) {
   //push方法传递第二个参数|第三个参数（箭头函数）
   //originPush：利用call修改上下文，变为(路由组件.$router)这个对象，第二参数：配置对象、第三、第四个参数：成功和失败回调函数
     originPush.call(this, location, resolve, reject);
   } else {
   //push方法没有产地第二个参数|第三个参数
     originPush.call(this,location,() => {},() => {}
     );
    }
   };
   //重写VueRouter.prototype身上的replace方法了
   VueRouter.prototype.replace = function(location, resolve, reject) {
    if (resolve && reject) {
      originReplace.call(this, location, resolve, reject);
    } else {
      originReplace.call(this,location,() => {},() => {}
     );
    }
   };