重写VueRouter的push|replace

文章目录


前言

在进行编程式路由导航的时候,反复点击控制台就会提示报错,为了深入了解编程式路由跳转,以及

防止控制台的多次报错需要对VueRouter的原型上的push以及replace进行重新编写!


编写

找到router/index.js文件,也就是路由的入口文件

先将原型的push|replace保存一份:

// 先把VueRouter原型对象的push,保存一份
let originPush = VueRouter.prototype.push

在后方编写其他内容:

// 重写push|replace
// 第一个参数:需要跳转的地址(传递哪些参数)
// 第二个参数:成功的回调
// 第三个参数:失败的回调
VueRouter.prototype.push = function (location, res, rej) {
  if (res && rej) {
    originPush.call(this, location, res, rej)
  } else {
    originPush.call(
      this,
      location,
      () => {},
      () => {}
    )
  }
}

复制内容,把replace重写一遍:

// 先把VueRouter原型对象的push,保存一份
let originPush = VueRouter.prototype.push
let originReplace = VueRouter.prototype.replace

// 重写push|replace
// 第一个参数:需要跳转的地址(传递哪些参数)
// 第二个参数:成功的回调
// 第三个参数:失败的回调
VueRouter.prototype.push = function (location, res, rej) {
  if (res && rej) {
    originPush.call(this, location, res, rej)
  } else {
    originPush.call(this,location,() => {},() => {})
  }
}
// 重写push|replace
// 第一个参数:需要跳转的地址(传递哪些参数)
// 第二个参数:成功的回调
// 第三个参数:失败的回调
VueRouter.prototype.replace= function (location, res, rej) {
  if (res && rej) {
    originReplace.call(this, location, res, rej)
  } else {
    originReplace.call(this,location,() => {},() => {})
  }
}

总结

例如:以上就是今天要讲的内容,本文仅仅简单介绍了重写VueRouter的push|replace,vue-router的

底层是使用promise的,所以需要指明成功和失败的回调

Logo

前往低代码交流专区

更多推荐