vue的beforeEach死循環如何解決

這篇文章主要介紹“vue的beforeEach死循環如何解決”，在日常操作中，相信很多人在vue的beforeEach死循環如何解決問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue的beforeEach死循環如何解決”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

什么是beforeEach？

beforeEach 是一個vue-router的路由導航鉤子，一般我用它做路由守衛。

什么是路由守衛？

路由跳轉前做一些驗證，比如登錄驗證，是網站中的普遍需求。對此，vue-route 提供的beforeRouteUpdate可以方便地實現導航守衛（navigation-guards）。導航守衛（navigation-guards）這個名字，聽起來怪怪的，但既然官方文檔是這樣翻譯的，就姑且這么叫吧。

舉個例子，當我們沒有登錄的時候，跳轉到登錄頁面。如果登錄了，則正常跳轉。

下面我們來看下死循環代碼。

export const router = new Router(RouterConfig);
router.beforeEach((to, from, next) => {
  let token = sessionStorage.getItem('token');
  if (token) {
    next();
  } else {
    next({path: '/p404'})
  }
});

當 token 不存在于 session 中，跳轉到 /p404，此時路由改變，再次進行判斷，則又跳轉到 /404，由此造成了死循環。在代碼中進行一次判斷，如果跳到 p404了，就讓它安心的進路由吧。修改后代碼如下。

export const router = new Router(RouterConfig);
router.beforeEach((to, from, next) => {
  let token = sessionStorage.getItem('token');
  if (token) {
    next();
  } else {
    if (to.path == '/p404') {
      next();
    } else {
      next({path: '/p404'})
    }
  }
});

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

到此，關于“vue的beforeEach死循環如何解決”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！