vue中路由攔截無限循環的情況

 

 

router.beforeEach(async (to, from, next) => {
  if (token) {
    if (whiteList.indexOf(to.path) != -1) {
      next()
    } else {
      next('404')
    }
  } else {
      console.log('test')
      next('404')
  }
})

上述實例中在沒有token的情況下出現無限循環

原因分析：

在設置路由攔截的時候當指向另一個地址的時候還會觸發一次路由攔截，既每次地址欄的變化都會觸發一次路由攔截，在沒有token值的時候會一直向404跳轉，所以會出現無限循環的情況

需要在進行跳轉的時候有一個滿足跳轉條件的來阻止跳轉帶來的路由攔截

router.beforeEach(async (to, from, next) => {
  if (token) {
    if (whiteList.indexOf(to.path) != -1) {
      next()
    } else {
      next('404')
    }
  } else {
    if (to.path === '/404') {
      next()
    } else {
      console.log('test')
      next('404')
    }
  }
})

在上述代碼中加入一個404，在每次進入路由攔截的時候就會定向到404來終止地址的跳轉，這樣就防止了無限循環