解決vue-router報NavigationDuplicated: Avoided redundant navigation to current location 的問題

場景：在 App.vue文件中通過watch全局監聽本地中是否有 token，若沒有，則跳轉到登錄頁；若有，則return。

app.vue代碼

watch: {
    $route() {
      if (!localStorage.getItem("token")) {
        this.$router.push("/login");
      } else {
        return;
      }
    }
  }

雖然跳轉到登錄頁了，但是控制台報錯了，如下：

 

 查閱相關資料，總結原因：watch監控執行了兩次，導致了重復觸發了同一個路由。

且在跳轉前后兩行分別打印了99 和 '-----'，結果發現確實打印了兩次：

 

 對於報錯，已找到了解決辦法：

在route.js文件中寫入以下代碼即可：

const originalPush = Router.prototype.push

Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

結果發現控制台中的報錯消失了。