翻译:“导航重复:避免到当前位置的冗余导航。”

报错原因:
vue-router发现你push了相同的路由。

解决思路:
在router文件夹的index.js下重写vue-router的push方法,令之不报该种类型的错误。

如何重写:
我们当然不需要自己完全的重写这个方法,我们仅仅需要在这个方法的基础之上多加一些处理。
1.首先保存好原来的push方法:

const routerPush = VueRouter.prototype.push

2.重写push方法,重写的push方法不仅需要调用原来的push方法,还需要在此基础上增加一个catch捕获异常,如果发现捕获的异常是NavigationDuplicated,那就忽略该异常,其它的异常正常显示。

VueRouter.prototype.push = function (location, onComplete, onAbort) {
   return routerPush.call(this, location, onComplete, onAbort).catch(err => {
     if(!/^NavigationDuplicated/.test(err)) {
       console.log(err);
     }
   })

补充:
1.关于参数:
发现网上很多方案是只传一个参数location的,像这样
const routerPush = Router.prototype.push
Router.prototype.push = function push(location) {
return routerPush.call(this, location).catch(err => {})
}
虽然这样确实也能解决问题,但我认为这样不好,因为vue-router中的push函数源代码是有三个参数的,随意改变的话可能会丧失该函数的一些原本的功能

2.关于catch错误:
网上的方案大多是直接将所有的错误都屏蔽了,我认为这样不好,因为我们只希望屏蔽push同一路由而造成的错误,对于其它错误我们希望他能正常显示。如果一味地将错误屏蔽,当有其它错误发生了我们也无法从控制台得到反馈,控制台没有报错,我们就认为真的没有错了,这就成了掩耳盗铃了。

写在最后:
以上仅仅是个人的看法,难免有什么错误或疏漏,还请多多批评指正。

Logo

前往低代码交流专区

更多推荐