这个不可描述的问题是:在使用ElementUI时点击同一个路由,页面报错。
错误代码如下:
element-ui.common.js?ccbf:3339 NavigationDuplicated {_
name: "NavigationDuplicated",
name: "NavigationDuplicated",
message: "Navigating to current location ("/users") is not allowed",
stack: "Error↵ at new NavigationDuplicated (webpack-int…e_modules/element-ui/lib/mixins/emitter.js:29:22)"}
问题描述出来就好办了,查询后修改router/index.js代码,增加:
const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {return originalPush.call(this, location).catch(err => err)
}
搞掂 😃
…没搞掂,还没看懂为什么这么写呢…接下来查了几篇分析文章:
1.原因分析
Vue-router在3.1之后把$router.push()方法改为了Promise。所以假如没有回调函数,错误信息就会交给全局的路由错误处理,因此就会报上述的错误。
“如果仔细观察并复现了多次错误便会发现,vue-router是先报了一个Uncaught (in promise)的错误(因为push没加回调),然后再点击路由的时候才会触发NavigationDuplicated的错误(路由出现的错误,全局错误处理打印了出来)”
—— 保留,我没出现Uncaught (in promise)的错误。
2.解决方案
方案一:禁止全局路由错误处理打印,这个也是vue-router开发者给出的解决方案,,就是上面的代码。
方案二:需要为每个router.push增加回调函数。对于我们来说这个解决方案的成本可能很高,但是是值得的。在vue-router 3.1版本之前的push调用时不会返回任何信息,假如push之后路由出现了问题也不会有任何的错误信息。如果你使用方案1固定了vue-router的版本,那么以后的项目需要路由的回调时你根本无从下手。
router.push('/location').catch(err => {err})
历史回顾:
如果你使用了Element-UI,并且方案一无法解决你的问题。那么你只能固定vue-router版本到3.0.7以下。这是因为Element-UI的el-menu在重复点击路由的时候报的错误,而且这个错误是Element-UI内部的路由问题,你无法通过方案一和二去解决。只能选择暂时不升级Vue-router。
好消息是Element-UI已经有了解决方案,预计在2.13.0版本会解决这个问题。
而项目现在使用的恰是2.13.0版本,因此不存在这个问题 😃