解決 Vue 重複點選相同路由，出現 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 問題

今天在做一個Vue項目時，當我添加了路由跳轉後，去頁面上點選想要跳轉路由，竟然出現了以下報錯：

 這個報錯的意思是：在跳轉路由時，出現了重複跳轉路由的情況，這種情況想一想也是很常見的：當我們在腳手架中使用this.$router.replace(path)進行路由跳轉的時候，傳回一個Promise對象，發生未捕獲的異常。在網上查資料後，找到了以下三種解決方案：

方案一：

        對Vue-Router原型鍊上的router.push或 router.replace方法進行重寫，這樣就不用每次調用方法都要加上catch，具體是重寫replace還是push，看你的項目而定！！

重寫push：

const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(to) {
    return VueRouterPush.call(this, to).catch(err => err)
}
           

 重寫replace：

const originalReplace = Router.prototype.replace
originalReplace.replace = function replace(location) {
return originalReplace.call(this, location).catch(err => err)
}
           

方案二：

        在跳轉時，判斷是否跳轉路由和目前路由是否一緻，避免重複跳轉産生問題。

toRouter (item) {
  if (this.$route.path !== item.url) {
    this.$router.push({ path: item.url })
  }
}
           

方案三：

        使用 catch 方法捕獲 router.push 異常。

this.$router.push(route).catch(err => {
  console.log('輸出報錯',err)
})