解決Vue-router 報NavigationDuplicated的三種方法

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

vue-router是先報了一個Uncaught (in promise)的錯誤(因為push沒加回調)，然后再點擊路由的時候才會觸發NavigationDuplicated的錯誤(路由出現的錯誤，全局錯誤處理打印了出來)

方案1： 降版，固定vue-router版本到3.0.7以下。

npm i vue-router@3.0 -S

方案2： 禁止全局路由錯誤處理打印，這個個方法是vue-router的issues里面的一位大佬解決的

在引入 vue-router 的文件中增加以下代碼，對Router原型鏈上的push、replace方法進行重寫，這樣就不用每次調用方法都要加上catch：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const originalPush = VueRouter.prototype.push
VueRouter.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)
}

方案3： 為每一個增加回調函數，vue-router的開發者給出了解決方法