Vue-router 報NavigationDuplicated的可能解決方案

時間 2019-11-12

標籤 vue router navigationduplicated 可能解決方案简体版

原文原文鏈接

出現這個問題，控制檯會報[NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}]。其緣由在於Vue-router在3.1以後把$router.push()方法改成了Promise。因此假如沒有回調函數，錯誤信息就會交給全局的路由錯誤處理，所以就會報上述的錯誤。vue

若是你仔細觀察並復現了屢次錯誤你會發現，vue-router是先報了一個Uncaught (in promise)的錯誤(由於push沒加回調)，而後再點擊路由的時候纔會觸發NavigationDuplicated的錯誤(路由出現的錯誤，全局錯誤處理打印了出來)。git

解決方案

方案1

固定vue-router版本到3.0.7如下。這個方案沒什麼說的，就是簡單粗暴，沒有任何理由。可是你能確保之後不升級vue-router嗎？github

方案2

禁止全局路由錯誤處理打印，這個也是vue-router開發者給出的解決方案：vue-router

import Router from 'vue-router'

const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}

把這段代碼放在引入vue-router以後就行，通常在main.js裏，若是你的路由單獨抽取出來了，那可能在其餘的路由文件中。promise

方案3(高成本高收益)

vue-router的開發者也給出瞭解決方法，你須要爲每一個router.push增長回調函數。函數

router.push('/location').catch(err => {err})

對於咱們來講這個解決方案的成本可能很高，可是是值得的。在vue-router 3.1版本以前的push調用時不會返回任何信息，假如push以後路由出現了問題也不會有任何的錯誤信息。若是你使用方案1固定了vue-router的版本，那麼之後的項目須要路由的回調時你根本無從下手。this

方案4

若是你使用了Element-UI，而且方案2沒法解決你的問題。那麼你只能用方案1來固定你的vue-router版本了。這是由於Element-UI的el-menu在重複點擊路由的時候報的錯誤，並且這個錯誤是Element-UI內部的路由問題，你沒法經過方案2和3去解決。只能選擇暫時不升級Vue-router。prototype

好消息是Element-UI已經有了解決方案，預計在2.13.0版本會解決這個問題。參考Github上issue#17269。code