vue-router使用next()跳轉到指定路徑時會無限循環

router.beforeEach((to, from, next) => {
     let urls = JSON.parse(sessionStorage.getItem('urls'))
    if (!urls) {
      return next()
    } else {
      let result = urls.includes(to.fullPath)
      if (to.path === '/home') {
        next()
      } else {
        if (!result) {
          next('/page404')
          return Vue.prototype.$alert('你沒有當前頁面權限')
        } else {
          next()
        }
      }
    }
})

當我輸入/page404 時，一直是循環，剛開始還以為是沒有配置路由，但是檢查路由里面的定義也是有的，后來查閱各種資料才發現：

后來經過查閱資料得知vue-router的next()方法無參和有參時是不一樣的

• next: Function: 一定要調用該方法來 resolve 這個鈎子。執行效果依賴 next 方法的調用參數。

  • next(): 進行管道中的下一個鈎子。如果全部鈎子執行完了，則導航的狀態就是 confirmed (確認的)。

  • next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕)，那么 URL 地址會重置到 from 路由對應的地址。

  • next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。你可以向 next 傳遞任意位置對象，且允許設置諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 toprop 或 router.push 中的選項。

  • next(error): (2.4.0+) 如果傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調。

確保要調用 next 方法，否則鈎子就不會被 resolved。

 

當執行鈎子函數時如果遇到next('/home')等時會中斷當前導航，
比如當前導航是去/a,那么遇到next('/page404')后就會把to.path改為/page404，然后會重新觸發這個離開的鈎子，
注意：此時會重新觸發執行這個鈎子，而不是在這個鈎子函數繼續執行的，之前是一直沒理解這里，
以為是執行next('/page404')后就會直接跳到page404頁面呢，當重新觸發后就會繼續執行next('/page404')所以會一直循環
。至於解決辦法就是判斷下，如果已經是/page404了就next()

參考資料：

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB