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来终止地址的跳转，这样就防止了无限循环