vue-router重写push方法,解决相同路径跳转报错
问题描述:当页面再次进入同一个路由地址时,控制台报错
报错信息大概的意思是不允许导航到当前位置。
主要依赖环境版本:vue:2.6.0 vue-router:3.1.3
解决办法:
修改vue-router的配置文件,也就是router/index.js文件
import Vue from 'vue'
import VueRouter from 'vue-router'
/**
* 重写路由的push方法
*/
const routerPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
return routerPush.call(this, location).catch(error=> error)
}
哼~~ 完美解决
~
~
~
不过又出现了新的问题。
额 好吧 接着来吧
先描述一下问题:
重写了push方法后正常的push路由导航是没有问题的。
在我的项目里有一个需求,跳转路由后需要做一些操作,例如 一些骚操作 嘿~嘿~嘿~。
我的写法是:
this.$router.push({name: "home-index"}, () => {
//TODO 这里就写一些骚操作,这里不可描述,你懂得~~~~~
});
这里的意思是: 算了 我还是复制vue-router官方的解释吧
In 2.2.0+, optionally provide onComplete and onAbort callbacks to router.push or router.replace as the 2nd and 3rd arguments. These callbacks will be called when the navigation either successfully completed (after all async hooks are resolved), or aborted (navigated to the same route, or to a different route before current navigation has finished), respectively.
(不要问我为什么用英文,这样显得高大上一些,这段我也读不懂)
之后下面还有一段话
In 3.1.0+, you can omit the 2nd and 3rd parameter and router.push/router.replace will return a promise instead if Promises are supported.
因为我用的vue-router是3.1.3的版本,肯定符合这就话的要求。
在我解决第一个问题之前这样写也不会有问题,但是现在有问题了,这些骚操作不执行了,哎呦我去,不让我有骚操作这怎么能行。
之后我就想是不是重写的这个push方法有问题
我又把第二个和第三个参数加上了
const routerPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location, onComplete, onAbort) {
return routerPush.call(this, location, onComplete, onAbort).catch(error=> error)
};
赶紧看一下结果,想想还有点小激动呐。。。
报错信息我瞬间口吐芬芳,这这这。。。。
好吧,可能不能这样写。
我乖乖的把代码改回去了。你以为我就妥协了。哼 我还会回来的
果不其然,有这样一句话成功的引起了我的注意,(只因为在人群中多看了你一眼)旋律自己想象
push/router.replace will return a promise instead if Promises are supported
他是说如果支持promise,push和replace方法将会返回一个Promises 。
灵光一现,我把我写骚操作的地方改了一下
this.$router.push({name: "home-index"}).then(() => {
//TODO 这里就写一些骚操作,这里不可描述,你懂得~~~~~
});
下面就是见证奇刻的时迹,不对,是见证奇迹的时刻。
我又口吐芬芳,嘿嘿 这次是好了!!!
应该是没什么问题了。
good good study,day day up !!!
小白一只,不喜勿喷。如有错误或不妥之处,还敬请大佬指正。小弟无以回报,只能以身相许,算了,还没有人许给我那。