vue-router的beforeEach导航钩子，next('/')出现死循环问题

Question

为什么next()指定路径会出现死循环

router.beforeEach((to, from, next) => {
  console.log('beforeEach');
  if(true){
    next('/');
  }else{
    next();
 }
});

Answer 1

next()直接跳转到to.path路径，没有再执行一遍beforeEach导航钩子，next('/')或者next('/login')自己指定路径的，路由跳转的时候还执行一遍beforeEach导航钩子，所以上面出现死循环；
栗子：如我们登录页（'/login'）面进入首页('/')，可以这么写：

router.beforeEach((to, from, next) => {
  var userInfo= JSON.parse(sessionStorage.getItem('userInfoStorage'));//获取浏览器缓存的用户信息
  if(userInfo){//如果有就直接到首页咯
    next();
  }else{
    if(to.path=='/login'){//如果是登录页面路径，就直接next()
      next();
    }else{//不然就跳转到登录；
      next('/login');
    }

  }
});

Answer 2

问题

出现无限循环是因为之前我没有弄清楚next()流程
因为每次跳转到一个路由的时候都会 触发 全局守卫 由于判断条件未改变 所以 一直循环

解决方法

1. 判断to路由的meta (isRequireAuthTrue)是否为true
2. 判断是否登陆(isLogin)

// ('/')为登陆界面  
// next() 默认跳转to的path
if(isRequireAuthTrue){
    if(isLogin){
      console.log('导航守卫保护');
      next(); //成功则跳转
    }else {
      console.log('你还没有登陆!');
      next({path:'/'}) //失败则跳转到登陆页面
    }
  }else {
    next();//不需要导航守卫的则直接next跳转
  }