vue中全局前置守卫router.beforeEach出现死循环日记

今天我用vue写登录的时候，想利用全局前置守卫来进行路由控制,判断是否登录和是否有此资源写完后会发现页面空白,并进入死循环。

设置路由

const routes = [
  {
    path: '/',
    redirect: "/login" // 重定向
  },
  {
    path: '/home',
    component: Home,
    children: [ // 子路由
      {
        path: '',
        name: 'home',
        component: Dash,
        meta: {
          auth: true
        }
      },
      {
        path: 'about',
        name: 'About',
        component: () => import('../views/About.vue'),
        meta: {
          auth: true
        }
      },
      {
        path: 'list',
        name: 'list',
        component: () => import('../views/List.vue'),
        meta: {
          auth: true
        }
      },
      {
        // path: 'detail',
        path: 'detail/:id', // id代表动态路由，值是不固定的
        name: 'detail',
        component: () => import('../views/Detail.vue'),
        meta: {
          auth: true
        }
      }
    ] 
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/Login.vue'),
    meta: {
      auth: true
    }
  }, 
  {
    path: "*", // 匹配所有路由
    name: "404",
    component: () => import('../views/NotFound.vue')
  }
]

错误代码

// 注册全局前置守卫
// 在访问路由之前进行拦截
router.beforeEach((to, from, next) => {
  // 获取 token, 登录的标识
  var token = sessionStorage.getItem("token");
  if(to.meta.auth) { // 判断是否有这个路径
    if(token) { // 再次判断是否已经登录过
      next()
    } else {
      next({ // 没有登录过，导向登录页
        path: '/login',
        query: {redirect: to.fullPath} // 记录原本想访问的路径
      })
    }
  } else {
    next(); 
  }

正确代码

// 注册全局前置守卫
// 在访问路由之前进行拦截
router.beforeEach((to, from, next) => {
  // 获取 token, 登录的标识
  var token = sessionStorage.getItem("token");
  
  if(token) { // 判断是否已经登录过
    next()
  } else { 
    if(to.meta.auth && to.path ==='/login') { // 如果有此资源且是登录页
      next();
    } else if(!to.meta.auth){ // 没有此资源，到404页面
      next()
    } else { // 有此资源，没有登陆过，也不是登录页
      next({path: '/login'})
    }
  }

})

原因：next({path: '/login'}) 会再次调用 router.beforeEach((to, from, next) ,在错误实例中没有出口，导致死循环