Vue2项目中重写push和replace方法

1. 问题描述

• 编程式路由跳转到当前路由（参数不变），多次执行会抛出 NavigationDuplicated 的警告错误
• 声明式导航没有这类问题，因为 vue-router 底层已经处理好了
• 为什么编程式导航进行路由跳转的时候，就有这种警告错误？由于vue-router最新版本3.5，引入了promise，当传递参数多次且重复，会抛出异常，因此出现上面现象。

例如：使用this.$router.push({name:‘Search’,params:{keyword:“…”||undefined}})时，如果多次执行相同的push，控制台会出现警告。

methods: {
    // 搜索按钮的回调函数，向search路由进行跳转
    goSearch() {
      this.$router.push({
        name: 'search',
        params: { keyword: this.keyword },
        query: { k: this.keyword.toUpperCase() }
      })
      
    }
  }

多次调用、执行以上方法 就会出现以下错误：

 2.解决方法

1.第一种

//通过给 push 方法传递相应的成功、失败的回调函数，可以捕获到当前的错误，可以解决问题。
let result = this.$router.push({
     name: 'search',
     params: { keyword: this.keyword },
     query: { k: this.keyword.toUpperCase() },
}, () => { }, (error) => { console.log(error); });

通过以上代码，可以解决错误，

这种写法：治标不治本，将来在别的组件当中 push | replace，编程式导航还会有类似的错误。

因此，不推荐！

2.第二种

push是VueRouter.prototype的一个方法，在router路由配置中的index.js文件里面重写该方法（重写push和replace）

​
// 配置路由的文件
import Vue from 'vue'
import VueRouter from 'vue-router'
// 使用插件
Vue.use(VueRouter)

// 先把VueRouter原型对象的push replace，先保存一份
let originPush = VueRouter.prototype.push;
let originReplace = VueRouter.prototype.replace;
// 重写 push 与 replace 方法
// 第一个参数：告诉原来的push方法，往哪里跳（路由跳转的配置对象，query、params参数）
// 第二个参数：成功的回调
// 第三个参数：失败的回调
// call apply 区别：
// 相同点：都可以调用函数一次，都可以篡改函数的上下文一次
// 不同点：call 与 apply 传递参数： call传递多个参数用逗号隔开，apply方法执行 传递数组
// fn.call(obj, 1, 2);   fn.apply(obj, [1, 2]);
VueRouter.prototype.push = function (location, resolve, reject) {
  if (resolve && reject) {
    // push 方法传递 第二个 或 第三个 参数
    //originPush：利用call修改上下文，变为(路由组件.$router)这个对象，第二参数：配置对象、第三、第四个参数：成功和失败回调函数
    originPush.call(this, location, resolve, reject);
  } else {
    // push 方法没有产生第二个 或 第三个参数
    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, () => { }, () => { });
  }
}



​