Vue Router Error Message : Uncaught (in promise) NavigationDuplicated / Router Refresh

問題

‌如果同一個路由又用 router 導向同一個路由會遇到下面的錯誤

vue-router.esm.js?8c4f:2089 Uncaught (in promise) NavigationDuplicated {_name: “NavigationDuplicated”, name: “NavigationDuplicated”, message: “Navigating to current location (“/reservation/create”) is not allowed”, stack: “Error
at new NavigationDuplicated (webpack-int…node_modules/vue/dist/vue.runtime.esm.js:1853:26)”}

‌原因

‌vue-router 3.1後 push 和 replace方法返回 promise, promise 被 reject 但是沒有 catch，導致報錯 Uncaught. 3.1版本之前是通過傳回調函數捕獲錯誤, 沒有回調就不會捕獲也不會報錯

‌官方issue: https://github.com/vuejs/vue-router/issues/2881#issuecomment-520554378

‌解法

方法1.使用 go(0)

router.go(n) 這個方法的參數是一個整數, 意思是在 history 記錄中向前或者後退多少步, 類似 window.history.go(n)。

this.$router.go(0);

這做法有個問題, 他會重新整理頁面, 所以會導致 vuex 裡面存的資料被刷掉.

方法2.先跳到某頁, 再跳回來

‌新增一個vue檔案, Refresh.vue

用來跳回原本路徑.‌

在 vue router 補上剛剛建立的Refresh.vue‌

導頁時補上, 當 catch 到 err 時, 就會跑到 Refresh, 再導回來.

參考

• https://forum.vuejs.org/t/navigationduplicated/71600/2
• https://router.vuejs.org/guide/essentials/navigation.html#router-go-n
• https://github.com/vuejs/vue-router/issues/2881#issuecomment-520554378