VueRouter進(jìn)階之導(dǎo)航鉤子和路由元信息的示例分析

這篇文章主要介紹了VueRouter進(jìn)階之導(dǎo)航鉤子和路由元信息的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

導(dǎo)航鉤子

vue-router 提供的導(dǎo)航鉤子主要用來(lái)攔截導(dǎo)航，讓它完成跳轉(zhuǎn)或取消。有多種方式可以在路由導(dǎo)航發(fā)生時(shí)執(zhí)行鉤子：全局的, 單個(gè)路由獨(dú)享的, 或者組件級(jí)的。

全局鉤子

你可以使用 router.beforeEach 注冊(cè)一個(gè)全局的 before 鉤子：

const router = new VueRouter({ ... })

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

當(dāng)一個(gè)導(dǎo)航觸發(fā)時(shí)，全局的 before 鉤子按照創(chuàng)建順序調(diào)用。鉤子是異步解析執(zhí)行，此時(shí)導(dǎo)航在所有鉤子 resolve 完之前一直處于 等待中。

每個(gè)鉤子方法接收三個(gè)參數(shù)：

• to: Route: 即將要進(jìn)入的目標(biāo) 路由對(duì)象

• from: Route: 當(dāng)前導(dǎo)航正要離開(kāi)的路由

• next: Function: 一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。

• next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed （確認(rèn)的）。

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

• next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航。

確保要調(diào)用 next 方法，否則鉤子就不會(huì)被 resolved。

同樣可以注冊(cè)一個(gè)全局的 after 鉤子，不過(guò)它不像 before 鉤子那樣，after 鉤子沒(méi)有 next 方法，不能改變導(dǎo)航：

router.afterEach(route => {
 // ...
})

你可以在路由配置上直接定義 beforeEnter 鉤子：

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

這些鉤子與全局 before 鉤子的方法參數(shù)是一樣的。

組件內(nèi)的鉤子

最后，你可以在路由組件內(nèi)直接定義以下路由導(dǎo)航鉤子：

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

beforeRouteEnter 鉤子 不能 訪問(wèn) this，因?yàn)殂^子在導(dǎo)航確認(rèn)前被調(diào)用,因此即將登場(chǎng)的新組件還沒(méi)被創(chuàng)建。

不過(guò)，你可以通過(guò)傳一個(gè)回調(diào)給 next來(lái)訪問(wèn)組件實(shí)例。在導(dǎo)航被確認(rèn)的時(shí)候執(zhí)行回調(diào)，并且把組件實(shí)例作為回調(diào)方法的參數(shù)。

beforeRouteEnter (to, from, next) {
 next(vm => {
  // 通過(guò) `vm` 訪問(wèn)組件實(shí)例
 })
}

路由元信息

你可以 在 beforeRouteLeave 中直接訪問(wèn) this。這個(gè) leave 鉤子通常用來(lái)禁止用戶在還未保存修改前突然離開(kāi)?？梢酝ㄟ^(guò) next(false) 來(lái)取消導(dǎo)航。

定義路由的時(shí)候可以配置 meta 字段：

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   children: [
    {
     path: 'bar',
     component: Bar,
     // a meta field
     meta: { requiresAuth: true }
    }
   ]
  }
 ]
})

那么如何訪問(wèn)這個(gè) meta 字段呢？

首先，我們稱呼 routes 配置中的每個(gè)路由對(duì)象為 路由記錄。路由記錄可以是嵌套的，因此，當(dāng)一個(gè)路由匹配成功后，他可能匹配多個(gè)路由記錄

例如，根據(jù)上面的路由配置，/foo/bar 這個(gè) URL 將會(huì)匹配父路由記錄以及子路由記錄。

一個(gè)路由匹配到的所有路由記錄會(huì)暴露為 $route 對(duì)象（還有在導(dǎo)航鉤子中的 route 對(duì)象）的 $route.matched 數(shù)組。因此，我們需要遍歷 $route.matched 來(lái)檢查路由記錄中的 meta 字段。

下面例子展示在全局導(dǎo)航鉤子中檢查 meta 字段：

router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.requiresAuth)) {
  // this route requires auth, check if logged in
  // if not, redirect to login page.
  if (!auth.loggedIn()) {
   next({
    path: '/login',
    query: { redirect: to.fullPath }
   })
  } else {
   next()
  }
 } else {
  next() // 確保一定要調(diào)用 next()
 }
})

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“VueRouter進(jìn)階之導(dǎo)航鉤子和路由元信息的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!