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

问题描述

问 题

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

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

解决方案

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');
    }

  }
});

这篇关于vue.js - vue-router的beforeEach导航钩子，next('/')出现死循环问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！