這個不可描述的問題是:在使用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版本,因此不存在這個問題 😃