一文詳解vue-router中的導航守衛(wèi)

更新時間：2023年07月16日 08:29:34 作者：舟羽

vue-router提供的導航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導航，在 vue-router 中，導航守衛(wèi)是一種非常重要的功能，所以本文將詳細講解一下vue-router中的導航守衛(wèi)，感興趣的同學跟著小編一起來看看吧

導航守衛(wèi)是什么

按照官方文檔說明，vue-router 提供的導航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導航。這里有很多方式植入路由導航中：全局的，單個路由獨享的，或者組件級的。

在 vue-router 中，導航守衛(wèi)是一種非常重要的功能，它允許你在路由導航過程中添加邏輯驗證和處理，比如判斷用戶是否登錄，如果沒有登錄就跳轉(zhuǎn)到登錄頁面，如果已經(jīng)登錄就跳轉(zhuǎn)到首頁。

導航守衛(wèi)的分類

在 Vue Router 中，有三種類型的導航守衛(wèi)方法可以使用：

全局守衛(wèi)：beforeEach 和 afterEach。
獨享路由守衛(wèi)：beforeEnter。
組件內(nèi)路由守衛(wèi)：beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。

全局守衛(wèi)

全局守衛(wèi)就是在路由跳轉(zhuǎn)時，對整個應用內(nèi)的所有路由進行攔截，然后進行一些操作。

全局守衛(wèi)分為全局前置守衛(wèi)和全局后置守衛(wèi)。

全局前置守衛(wèi)就是在路由跳轉(zhuǎn)之前進行攔截，全局后置守衛(wèi)就是在路由跳轉(zhuǎn)之后進行攔截。

全局前置守衛(wèi)的使用方法如下：

router.beforeEach((to, from, next) => {
  // ...
})

全局后置守衛(wèi)的使用方法如下：

router.afterEach((to, from) => {
  // ...
})

路由獨享守衛(wèi)

路由獨享守衛(wèi)就是在路由跳轉(zhuǎn)時，對應用內(nèi)的某個特定的路由進行攔截，然后進行一些操作。

路由獨享守衛(wèi)的使用方法如下：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

組件內(nèi)守衛(wèi)

組件內(nèi)守衛(wèi)就是在組件內(nèi)部定義的特殊守衛(wèi)方法，用于處理組件級別的路由導航。常見的組件內(nèi)守衛(wèi)包括：

beforeRouteEnter: 在路由進入組件之前被調(diào)用，可以訪問不到組件實例（this），但可以通過回調(diào)函數(shù)獲取組件實例。
beforeRouteUpdate: 在當前路由被復用時調(diào)用，例如同一個組件在不同參數(shù)下進行切換時。
beforeRouteLeave: 在離開當前路由之前調(diào)用，可以詢問用戶是否保存未保存的數(shù)據(jù)或執(zhí)行其他清理操作。

const UserDetails = {
  template: `...`,
  beforeRouteEnter(to, from) {
    // 在渲染該組件的對應路由被驗證前調(diào)用
    // 不能獲取組件實例 `this` ！
    // 因為當守衛(wèi)執(zhí)行時，組件實例還沒被創(chuàng)建！
  },
  beforeRouteUpdate(to, from) {
    // 在當前路由改變，但是該組件被復用時調(diào)用
    // 舉例來說，對于一個帶有動態(tài)參數(shù)的路徑 `/users/:id`，在 `/users/1` 和 `/users/2` 之間跳轉(zhuǎn)的時候，
    // 由于會渲染同樣的 `UserDetails` 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調(diào)用。
    // 因為在這種情況發(fā)生的時候，組件已經(jīng)掛載好了，導航守衛(wèi)可以訪問組件實例 `this`
  },
  beforeRouteLeave(to, from) {
    // 在導航離開渲染該組件的對應路由時調(diào)用
    // 與 `beforeRouteUpdate` 一樣，它可以訪問組件實例 `this`
  },
}

導航守衛(wèi)的參數(shù)

導航守衛(wèi)的參數(shù)如下：

to: 即將要進入的目標路由對象,包含了目標路由的路徑、參數(shù)、查詢參數(shù)等信息，可以用來判斷要導航到哪個路由。
from: 當前導航正要離開的路由,包含了當前路由的路徑、參數(shù)、查詢參數(shù)等信息，可以用來判斷當前路由的狀態(tài)。
next 方法：用于控制導航行為。它有以下幾種用法：
- next(): 允許導航，繼續(xù)進行下一步導航操作。
- next(false): 取消導航，終止當前導航操作。
- next('/') 或 next({ path: '/' }): 重定向到指定的路徑。
- next(error): 導航出錯，可以傳遞一個錯誤對象給 next 方法。

導航守衛(wèi)的執(zhí)行順序

導航守衛(wèi)的執(zhí)行順序如下：

全局前置守衛(wèi) -> 路由獨享守衛(wèi) -> 組件內(nèi)守衛(wèi) -> 全局后置守衛(wèi)

導航守衛(wèi)的使用場景

全局前置守衛(wèi)

判斷用戶是否登錄，如果沒有登錄就跳轉(zhuǎn)到登錄頁面，如果已經(jīng)登錄就跳轉(zhuǎn)到首頁。

router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    next()
  } else {
    const token = localStorage.getItem('token')
    if (!token) {
      next('/login')
    } else {
      next()
    }
  }
})

全局后置守衛(wèi)

記錄用戶訪問的頁面。

router.afterEach((to, from) => {
  localStorage.setItem('path', to.path)
})

路由獨享守衛(wèi)

判斷用戶是否有權限訪問某個頁面，如果沒有權限就跳轉(zhuǎn)到首頁。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        const token = localStorage.getItem('token')
        if (!token) {
          next('/')
        } else {
          const role = localStorage.getItem('role')
          if (to.meta.role && to.meta.role.indexOf(role) === -1) {
            next('/')
          } else {
            next()
          }
        }
      }
    }
  ]
})

組件內(nèi)守衛(wèi)

數(shù)據(jù)預加載：在進入組件之前，需要先加載一些數(shù)據(jù)?？梢允褂?nbsp;beforeRouteEnter 組件內(nèi)守衛(wèi)來調(diào)用接口獲取數(shù)據(jù)，并在數(shù)據(jù)加載完成后再進入組件。

const Foo = {
  beforeRouteEnter(to, from, next) {
    fetchData().then(data => {
      next(vm => {
        vm.data = data; // 將數(shù)據(jù)傳遞給組件實例
      });
    });
  },
};

路由參數(shù)更新：當同一個組件在不同參數(shù)下進行切換時，可能需要根據(jù)新的參數(shù)更新組件的數(shù)據(jù)或狀態(tài)?？梢允褂?nbsp;beforeRouteUpdate 組件內(nèi)守衛(wèi)來處理這種情況。

const Baz = {
  beforeRouteUpdate(to, from, next) {
    if (to.params.id !== from.params.id) {
      // 當路由參數(shù) id 發(fā)生變化時，重新請求數(shù)據(jù)
      this.fetchData(to.params.id);
    }
    next();
  },
};

數(shù)據(jù)清理：在離開當前路由之前需要執(zhí)行一些清理操作，例如取消訂閱事件、重置組件狀態(tài)等?？梢允褂?nbsp;beforeRouteLeave 組件內(nèi)守衛(wèi)來處理這些操作。

const Bar = {
  beforeRouteLeave(to, from, next) {
    if (this.hasUnsavedChanges()) {
      if (confirm('是否保存修改的數(shù)據(jù)？')) {
        this.saveData(); // 保存修改的數(shù)據(jù)
      }
    }
    next(); 
};

頁面切換動畫：在切換頁面時添加過渡動畫效果，以提升用戶體驗?？梢栽?nbsp;beforeRouteEnter 和 beforeRouteLeave 組件內(nèi)守衛(wèi)中設置過渡動畫的相關邏輯。

const Qux = {
  beforeRouteEnter(to, from, next) {
    // 在進入組件之前設置初始過渡狀態(tài)
    this.transitionName = 'slide-in';
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 在離開組件之前設置過渡狀態(tài)
    this.transitionName = 'slide-out';
    next();
  },
};

到此這篇關于一文詳解vue-router中的導航守衛(wèi)的文章就介紹到這了,更多相關vue-router導航守衛(wèi)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: