在使用vue-router beforeEach钩子时，你也许会遇到如下问题：

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, 问题很简单，但一不小心就入坑了

以上就是本文的全部内容，希望对大家的学习有所帮助