這個不可描述的問題是：在使用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。所以假如沒有回調函數(shù)，錯誤信息就會交給全局的路由錯誤處理，因此就會報上述的錯誤。

“如果仔細觀察并復現(xiàn)了多次錯誤便會發(fā)現(xiàn)，vue-router是先報了一個Uncaught (in promise)的錯誤(因為push沒加回調)，然后再點擊路由的時候才會觸發(fā)NavigationDuplicated的錯誤(路由出現(xiàn)的錯誤，全局錯誤處理打印了出來)”
—— 保留，我沒出現(xiàn)Uncaught (in promise)的錯誤。

2.解決方案

方案一：禁止全局路由錯誤處理打印，這個也是vue-router開發(fā)者給出的解決方案,，就是上面的代碼。

方案二：需要為每個router.push增加回調函數(shù)。對于我們來說這個解決方案的成本可能很高，但是是值得的。在vue-router 3.1版本之前的push調用時不會返回任何信息，假如push之后路由出現(xiàn)了問題也不會有任何的錯誤信息。如果你使用方案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版本會解決這個問題。
而項目現(xiàn)在使用的恰是2.13.0版本，因此不存在這個問題 😃

總結

以上是生活随笔為你收集整理的Vue项目代码改进（四）—— 在使用ElementUI时点击同一个路由，页面报错的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。