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

解決方案

方案1

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

方案2

禁止全局路由錯誤處理打印，這個也是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里，如果你的路由單獨抽取出來了，那可能在其他的路由文件中。

方案3(高成本高收益)

vue-router的開發者也給出了解決方法，你需要為每個router.push增加回調函數。

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

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

方案4

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

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

參考文章