背景
最近在学习Vue,在使用vue+vue-router的时候,发现在当前路由继续跳转当前路由的时候控制台会报错,虽然不影响实际结果但是看着很恼人,于是想解决下。
解决一
在网上搜了下给了个解决方法,改写VueRouter原型上的 push和 replace方法。在发生错误的时候.catch,返回返回正常的结果
和vue-router深入沟通
只知道这样解决可不算行,得知道为什么可以这么解决吧?于是翻看vue-router源码查看下,以push方法为例。
这里很好的解释了 解决一出为什么能解决的问题,因为我们在使用
push的时候,只填写了第一个参数,也就是跳转的路由信息 declare type RawLocation = string | Location,而没有填写后面的两个参数。而当只填写一个参数的时候,返回的是一个Promise对象,Promise对象在内部发生错误的时候会返回一个失败的Promise对象,而我们在外面 .catch 的时候调用了Promise的catch函数,参数是一个函数,没有做任何处理,即返回一个成功的Promise对象,于是问题得到解决。
- 继续往里走
我们使用的
mode是history模式的,于是以HTML5History对象的push为例
- 进入
push函数 这里可以看到失败的回调onAbort是直接传入了transitionTo函数的
3.进入transitionTo函数
发现onAbort函数装饰了下作为了confirmTransition函数的参数,这里push中如果是new的Primise的话,就会调用reject回调,修改状态为rejected。
4.我们继续走进 confirmTransition
以此,可以有第二种解决办法 ,就是自己设置回调函数,使vue-router不返回Promise对象。函数中对异常信息不做任何处理,那么控制台也不会打印错误信息。
解决方法二
按上面的逻辑,自己设置失败时的回调 ,在回调中不对异常信息做任何处理(函数体没逻辑)。不能每次都写吧?那么还是直接修改vue-router的原型,以push方法为例。
调用的时候设置了回调函数就使用设置的,没设置就使用空函数。 至于为什么调用的时候两个函数都设置了才使用设置的回调函数,因为源码中也是这样处理的