900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > Vue项目代码改进(四)—— 在使用ElementUI时点击同一个路由 页面报错

Vue项目代码改进(四)—— 在使用ElementUI时点击同一个路由 页面报错

时间:2019-07-05 08:36:12

相关推荐

Vue项目代码改进(四)—— 在使用ElementUI时点击同一个路由 页面报错

这个不可描述的问题是:在使用ElementUI时点击同一个路由,页面报错。

错误代码如下:

element-mon.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.pushRouter.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版本,因此不存在这个问题😃

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。