什麼是beforeEach？

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

什麼是路由守衛？

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

文件地址：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

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

下面我們來看下死迴圈程式碼。

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,next) => {
  let token = sessionStorage.getItem('token');
  if (token) {
    next();
  } else {
    if (to.path == '/p404') {
      next();
    } else {
      next({path: '/p404'})
    }
  }
});

到此這篇關於詳解vue beforeEach 死迴圈問題解決方法的文章就介紹到這了,更多相關vue beforeEach 死迴圈 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！