vue路由守衛 beforeEach 的使用的填坑記錄

總體來講vue里面提供了三大類鈎子
1、全局鈎子
2、某個路由的鈎子（路由獨享）
3、組件內鈎子（組件獨享）

兩種函數：

1、 Vue.beforeEach(function(to,form,next){}) /*在跳轉之前執行*/

2   .Vue.afterEach(function(to,form))/*在跳轉之后判斷*/

 

vue-router beforeEach鈎子時，你也許會遇到如下問題

//路由跳轉前做判斷
router.beforeEach((to, from, next) => {
  let hasLogin = Cookies.get('hasLogin'); //從cookies中獲取是否已登陸過的信息
  if(hasLogin){
    next()
  }else{
    if(to.path == '/login'){
      next()
    }else{
      next({
        replace:true,
        name:'login',
      })
    }
  }

在使用beforeEach中，會遇到兩個問題：

1、訪問指定頁面出現無法加載的情況（也就是空白）

2、訪問指定頁面，出現無限循環的問題

 

這么寫代碼會有個問題，那就是當hasLogin為false時，訪問任意頁面都會出現空白，這是因為：

next() 表示路由成功，直接進入to路由，不會再次調用router.beforeEach()
next('login') 表示路由攔截成功，重定向至login，會再次調用router.beforeEach()
也就是說beforeEach()必須調用next(),否則就會出現無限循環，next() 和 next('xxx') 是不一樣的，區別就是前者不會再次調用router.beforeEach()，后者會！！！

解決方法

router.beforeEach((to, from, next)=>{
  if(hasLogin){ //如果已經登錄，則直接跳轉
    next();
  }else if(to.name === 'Home'){ //如果未跳轉，且訪問的是首頁，則重定向到登錄頁
    next({
      replace:false,
      name:'login'
    })
  }else{
    next() //新增這一句
  }
})
 
/*
理解：
當調用完next({name:'login'})，再次調用router.beforeEach()時，此時的to.name可能已經不在router.beforeEach()的條件判斷中了，因此需要加上next()，
告訴路由守衛，這種情況的繼續執行，而不至於停留。

 

在使用vue-router beforeEach鈎子時，你也許會遇到如下問題：

router.beforeEach((to, from, next) => {
//判斷登錄狀態簡單實例
var userInfo = window.localStorage.getItem('token');
if (userInfo) {
next();
} else {
next('/login');
}
})

解決方案

router.beforeEach((to, from, next) => {
var userInfo = window.localStorage.getItem('token');//獲取瀏覽器緩存的用戶信息
if(userInfo){ //如果有就直接到首頁咯
next();
} else {
if(to.path=='/login'){ //如果是登錄頁面路徑，就直接next()
next();
} else { //不然就跳轉到登錄；
next('/login');
}
 
}
})

解決思路：

排除此時地址 = 轉向的地址 的情況，避免dead loop, 問題很簡單，但一不小心就入坑了

以上就是本文的全部內容，希望對大家的學習有所幫助