解决Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location:
翻译:“导航重复:避免到当前位置的冗余导航。”报错原因:vue-router发现你push了相同的路由。解决思路:重写vue-router的push方法,令之不报该种类型的错误。如何重写:我们当然不需要自己完全的重写这个方法,我们仅仅需要在这个方法的基础之上多加一些处理。1.首先保存好原来的push方法:const routerPush = VueRouter.prototype.push2.重写
翻译:“导航重复:避免到当前位置的冗余导航。”
报错原因:
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同一路由而造成的错误,对于其它错误我们希望他能正常显示。如果一味地将错误屏蔽,当有其它错误发生了我们也无法从控制台得到反馈,控制台没有报错,我们就认为真的没有错了,这就成了掩耳盗铃了。
写在最后:
以上仅仅是个人的看法,难免有什么错误或疏漏,还请多多批评指正。
更多推荐
所有评论(0)