關於vue-router的beforeEach無限循環的問題

最近在使用vue-router的beforeEach鉤子時候遇到了一個問題,就是在beforeEach()中設置好判斷條件後出現了無限循環的問題
代碼以下:vue

// isLogined 用來判斷用戶是否已登陸
router.beforeEach((to, from, next) => {
  if(isLogined){
    next()
  }else{
    console.log('測試')
    next('login')
  }
})

結果chrome的debug中看到:vue-router

clipboard.png

這個問題我是這樣理解的:chrome

router.beforeEach((to, from, next) => {
    if(true){
        next()
    }else{
        next('login')
    }
})
  • next() 表示路由成功,直接進入to路由,不會再次調用router.beforeEach()
  • next('login') 表示路由攔截成功,重定向至login,會再次調用router.beforeEach()

也就是說beforeEach()必須調用next(),不然就會出現無限循環,
next() 和 next('xxx') 是不同的,區別就是前者不會再次調用router.beforeEach(),後者會!!!測試

官網這樣寫的(主要是紅線標記的那句!):spa

clipboard.png

So.... 若是爲你解惑了,點個讚唄~ 若是我理解的有誤,請指正~debug

相關文章
相關標籤/搜索