VueRouter中重写push和replace方法

2,495 阅读1分钟

场景: 在vue中如果我们使用编程是跳转路由,然后跳转的还是同一个路由页面,那么控制台会出现一下的报错:

image.png

这样的错误是因为我们跳转的还是同一个路由。

两种解决方法: 第一种:跳转的时候在push或者replace的后面添加两个箭头函数,如下图:

image.png

显然第一种方法不智能,下面介绍第二种方法: 此方法需要在路由index文件里面写:

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,
      () => {},
      () => {}
    );
  }
};

问题已经解决,打完收工,准备下一场。