重写VueRouter的push|replace
重写VueRouter的push|replace文章目录前言编写总结前言在进行编程式路由导航的时候,反复点击控制台就会提示报错,为了深入了解编程式路由跳转,以及防止控制台的多次报错需要对VueRouter的原型上的push以及replace进行重新编写!编写找到router/index.js文件,也就是路由的入口文件先将原型的push|replace保存一份:// 先把VueRouter原型对象的
·
重写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的,所以需要指明成功和失败的回调
更多推荐
已为社区贡献6条内容
所有评论(0)