NavigationDuplicated: Avoided redundant navigation to current location: /xxx 解决

707 阅读2分钟

背景

最近在学习Vue,在使用vue+vue-router的时候,发现在当前路由继续跳转当前路由的时候控制台会报错,虽然不影响实际结果但是看着很恼人,于是想解决下。

image.png

解决一

在网上搜了下给了个解决方法,改写VueRouter原型上的 push和 replace方法。在发生错误的时候.catch,返回返回正常的结果

image.png

和vue-router深入沟通

只知道这样解决可不算行,得知道为什么可以这么解决吧?于是翻看vue-router源码查看下,以push方法为例。

image.png 这里很好的解释了 解决一出为什么能解决的问题,因为我们在使用push的时候,只填写了第一个参数,也就是跳转的路由信息 declare type RawLocation = string | Location,而没有填写后面的两个参数。而当只填写一个参数的时候,返回的是一个Promise对象,Promise对象在内部发生错误的时候会返回一个失败的Promise对象,而我们在外面 .catch 的时候调用了Promisecatch函数,参数是一个函数,没有做任何处理,即返回一个成功的Promise对象,于是问题得到解决。

  1. 继续往里走 我们使用的modehistory模式的,于是以HTML5History对象的push为例

image.png

  1. 进入push函数 这里可以看到失败的回调onAbort是直接传入了transitionTo函数的 image.png

3.进入transitionTo函数 发现onAbort函数装饰了下作为了confirmTransition函数的参数,这里push中如果是new的Primise的话,就会调用reject回调,修改状态为rejected

image.png

4.我们继续走进 confirmTransition

image.png

image.png

以此,可以有第二种解决办法 ,就是自己设置回调函数,使vue-router不返回Promise对象。函数中对异常信息不做任何处理,那么控制台也不会打印错误信息。

解决方法二

按上面的逻辑,自己设置失败时的回调 ,在回调中不对异常信息做任何处理(函数体没逻辑)。不能每次都写吧?那么还是直接修改vue-router的原型,以push方法为例。

image.png

调用的时候设置了回调函数就使用设置的,没设置就使用空函数。 至于为什么调用的时候两个函数都设置了才使用设置的回调函数,因为源码中也是这样处理的

image.png