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) ,在錯誤實例中沒有出口，導致死循環