快捷導(dǎo)航

vue中的導(dǎo)航守衛(wèi)使用及說明

更新時間：2023年01月20日 09:49:49 作者：AIpoem

這篇文章主要介紹了vue中的導(dǎo)航守衛(wèi)使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

導(dǎo)航守衛(wèi)

作用：對路由進(jìn)行權(quán)限控制
分類：全局守衛(wèi)、獨享守衛(wèi)、組件內(nèi)守衛(wèi)

全局守衛(wèi)

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      meta: { isAuth: false },	// 不需要進(jìn)行權(quán)限控制
    },
     {
      path: '/user',
      component: User,
      meta: { isAuth: true },	// 需要進(jìn)行權(quán)限控制
    },
  ]
})
// 全局前置守衛(wèi)：初始化時執(zhí)行/每次路由切換前執(zhí)行
router.beforeEach((to,from,next) => {
  if(to.meta.isAuth) {  // 判斷當(dāng)前路由是否需要進(jìn)行權(quán)限控制（在需要進(jìn)行權(quán)限控制的路由中配置isAuth屬性）
    if(localStorage.getItem('xxx') === 'xxx') { // 權(quán)限控制的具體規(guī)則
      next();   // 放行
    }else {
      ...
    }
  } else {  // 當(dāng)前路由不需要進(jìn)行權(quán)限控制
    next(); // 直接放行
  }
})
// 全局后置守衛(wèi)：初始化時執(zhí)行，每次路由切換后執(zhí)行
router.afterEach((to,from) => {
  if(to.meta.title) {
    document.title = to.meta.title; // 修改網(wǎng)頁的title
  }else {
    document.title = 'xxx';
  }
})

獨享守衛(wèi)

加在某個路由的配置中

beforeEnter((to,from,next) => {
? if(to.meta.isAuth) { ?// 判斷當(dāng)前路由是否需要進(jìn)行權(quán)限控制（在需要進(jìn)行權(quán)限控制的路由中配置isAuth屬性）
? ? if(localStorage.getItem('xxx') === 'xxx') { // 權(quán)限控制的具體規(guī)則
? ? ? next(); ? // 放行
? ? }else {
? ? ? ...
? ? }
? } else { ?// 當(dāng)前路由不需要進(jìn)行權(quán)限控制
? ? next(); // 直接放行
? }
})

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

// 進(jìn)入守衛(wèi)，通過路由規(guī)則，進(jìn)入該組件時被調(diào)用
beforeRouteEnter(to,from,next){
  ...
}
// 當(dāng)前路由改變，但是該組件被復(fù)用時調(diào)用
// 舉例來說，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候，
// 由于會渲染同樣的 Foo 組件，組件實例會被復(fù)用。而這個鉤子就會被調(diào)用
beforeRouteUpdate(to,from,next{
  ...
}
// 離開守衛(wèi)，通過路由規(guī)則，離開該組件時被調(diào)用
beforeRouteLeave(to,from,next){
  ...
}

vue導(dǎo)航守衛(wèi)有哪些

路由的鉤子函數(shù)有六個

全局的路由鉤子函數(shù)：beforeEach、afterEach
單個路由的鉤子函數(shù)：beforeEnter
組件內(nèi)路由鉤子函數(shù)：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

全局路由鉤子函數(shù)

1、全局前置守衛(wèi)： beforeEach(to, from, next)

router.beforeEach: 在每次每一個路由改變的時候都會執(zhí)行一遍

to：將要進(jìn)入的路由對象
from: 當(dāng)前正要離開的路由對象
next

next()，進(jìn)入下一個路由，必須調(diào)用，不然不會跳轉(zhuǎn)

next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕)，那么 URL 地址會重置到 from 路由對應(yīng)的地址。

next(’/’) 或者 next({ paht：’/’})：跳轉(zhuǎn)到一個不同的地址。當(dāng)前的導(dǎo)航會被中斷，然后進(jìn)行一個新的導(dǎo)航。可傳遞的參數(shù)可以是 router-link 標(biāo)簽中的 to 屬性參數(shù)或 router.push 中的選項

應(yīng)用場景：可進(jìn)行一些頁面跳轉(zhuǎn)前處理，例如判斷需要登錄的頁面進(jìn)行攔截，做登錄跳轉(zhuǎn), 還有管理員權(quán)限判斷。

2、全局后置守衛(wèi)：afterEach(to, from)

router.afterEach: 和 beforeEach 相反，它是在路由跳轉(zhuǎn)完成后觸發(fā)，它發(fā)生在 beforeEach 之后 beforeRouteEnter(組件內(nèi)守衛(wèi)) 之前, 因為是跳轉(zhuǎn)完成后觸發(fā)，所以沒有 next 參數(shù)。

路由內(nèi)的鉤子函數(shù)

路由獨享守衛(wèi)：beforeEnter(to, from, next)

和 beforeEach 完全相同，如果兩個都設(shè)置了，beforeEnter 則在 beforeEach 之后緊隨執(zhí)行。在路由配置上直接定義 beforeEnter 守衛(wèi)

組件內(nèi)的鉤子函數(shù)

是指在組件內(nèi)執(zhí)行的鉤子函數(shù)，類似于組件內(nèi)的生命周期

組件前置守衛(wèi) beforeRouteEnter: 該鉤子在全局守衛(wèi) beforeEach 和獨享守衛(wèi) beforeEnter 之后。
組件更新守衛(wèi) beforeRouteUpdate：在當(dāng)前路由改變時，并且該組件被復(fù)用時調(diào)用。
組件離開守衛(wèi) beforeRouteLeave：導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用

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