vue重写push和replace方法

一、重写原因

编程式导航时，点击当前所在的路由时，控制台报如下的错误信息

报错原因：
“vue-router”: “^3.5.3”，引入了promise，再调用push或者replace方法的时候会返回一个promise对象。push和replace方法中没有处理成功和失败的1回调。
解决方法：
1、通过给push和replace方法传相应的成功和失败的回调，何以捕获到当前的错误，可以解决。
2、通过修改底层push和replace方法可以解决；
2.1、this：当前组件实例；
2.2、this.$router属性：这个属性的属性值是VueRouter类的一个实例，当在入口文件注册路由的时候，给组件实例添加了$router和$route属性；
2.3、push和replace；$router的原型对象上的方法，即VueRouter类的方法；

// 先把VueRouter类的push方法先保存一份
let originPush = VueRouter.prototype.push;
let originReplace = VueRouter.prototype.replace;

// 重写push方法
/**
 * 
 * @param {*} location 告诉原来的push方法，路由往哪里跳转（传递哪些参数）
 * @param {*} resolve 成功的回调
 * @param {*} reject 失败的回调
 * 
 */
VueRouter.prototype.push = function (location, resolve, reject) {
  if (resolve && reject) {
    /**
     * this:此处this的上下文指向是VueRuoter类；
     * origingPush()直接调用时，this指向为location,我们需要保证调用原来的push方法时其this上下文指向为VueRouter,所以此处需要改变origingPushdethis指向；
     * call||applay的区别
     * 相同点：都可以调用函数一次，都可以篡改函数的上下文一次
     * 不同点：call传递参数用 , 号隔开，aoolay传递参数用数组
     */
    originPush.call(this, location, resolve, reject)
  } else {
    originPush.call(this, location, () => { }, () => { });
  }
}

// 重写replace方法
/**
 * 
 * @param {*} location 告诉原来的push方法，路由往哪里跳转（传递哪些参数）
 * @param {*} resolve 成功的回调
 * @param {*} reject 失败的回调
 * 
 */
 VueRouter.prototype.replace = function (location, resolve, reject) {
  if (resolve && reject) {
    /**
     * this:此处this的上下文指向是VueRuoter类；
     * origingReplace()直接调用时，this指向为location,我们需要保证调用原来的push方法时其this上下文指向为VueRouter,所以此处需要改变origingPushdethis指向；
     * call||applay的区别
     * 相同点：都可以调用函数一次，都可以篡改函数的上下文一次
     * 不同点：call传递参数用 , 号隔开，aoolay传递参数用数组
     */
    originReplace.call(this, location, resolve, reject)
  } else {
    originReplace.call(this, location, () => { }, () => { });
  }
}