Vue - 路由守衛(wèi)（路由的生命周期）

路由守衛(wèi)是什么更哄？

官方解釋：

“導(dǎo)航”表示路由正在發(fā)生改變厂僧。正如其名悲关，vue-router提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航蒲列。有多種機(jī)會植入路由導(dǎo)航過程中：全局的, 單個(gè)路由獨(dú)享的, 或者組件級的。

簡單的說争拐，導(dǎo)航守衛(wèi)就是路由跳轉(zhuǎn)過程中的一些鉤子函數(shù)腋粥。路由跳轉(zhuǎn)是一個(gè)大的過程，這個(gè)大的過程分為跳轉(zhuǎn)前中后等等細(xì)小的過程架曹，在每一個(gè)過程中都有一函數(shù)隘冲，這個(gè)函數(shù)能讓你操作一些其他的事兒，這就是導(dǎo)航守衛(wèi)绑雄。類似于組件生命周期鉤子函數(shù)

路由守衛(wèi)分類

【1】全局守衛(wèi)：是指路由實(shí)例上直接操作的鉤子函數(shù)展辞，特點(diǎn)是所有路由配置的組件都會觸發(fā)，直白點(diǎn)就是觸發(fā)路由就會觸發(fā)這些鉤子函數(shù)

beforeEach（to万牺，from罗珍， next）
beforeResolve（to，from脚粟， next）
afterEach（to覆旱，from）

【2】路由守衛(wèi)：是指在單個(gè)路由配置的時(shí)候也可以設(shè)置的鉤子函數(shù)

beforeEnter（to，from珊楼， next）

【3】組件守衛(wèi)：是指在組件內(nèi)執(zhí)行的鉤子函數(shù)通殃，類似于組件內(nèi)的生命周期，相當(dāng)于為配置路由的組件添加的生命周期鉤子函數(shù)厕宗。

beforeRouteEnter（to画舌，from， next）
beforeRouteUpdadte（to已慢，from曲聂， next）
beforeRouteLeave（to，from佑惠， next）

路由守衛(wèi)回調(diào)參數(shù)介紹

to：即將要進(jìn)入的目標(biāo)路由對象朋腋；

from：即將要離開的路由對象；

next：涉及到next參數(shù)的鉤子函數(shù)膜楷，必須調(diào)用next()方法來resolve這個(gè)鉤子旭咽，否則路由會中斷在這，不會繼續(xù)往下執(zhí)行

next()：進(jìn)行管道中的下一個(gè)鉤子赌厅。如果全部鉤子執(zhí)行完了穷绵，則導(dǎo)航的狀態(tài)就是confirmed(確認(rèn)的)。
next( false )中斷當(dāng)前的導(dǎo)航特愿。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕)仲墨，那么 URL 地址會重置到from路由對應(yīng)的地址勾缭。
next( ' / ')或者next({ paht：' / ' })：跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷目养，然后進(jìn)行一個(gè)新的導(dǎo)航俩由。可傳遞的參數(shù)可以是router-link標(biāo)簽中的to屬性參數(shù)或router.push中的選項(xiàng)
next( error )：如果傳入next的參數(shù)是一個(gè)Error實(shí)例癌蚁，則導(dǎo)航會被終止且該錯(cuò)誤會被傳遞給router.onError()注冊過的回調(diào)幻梯。

路由守衛(wèi)詳解

【1】全局前置守衛(wèi)（beforeEach）: 在路由跳轉(zhuǎn)前觸發(fā)，這個(gè)鉤子作用主要是用于登錄驗(yàn)證匈勋，也就是路由還沒跳轉(zhuǎn)提前告知礼旅，以免跳轉(zhuǎn)了再通知就為時(shí)已晚。

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

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

【2】全局解析守衛(wèi)（beforeResolve）: 這個(gè)鉤子和beforeEach類似洽洁，也是路由跳轉(zhuǎn)前觸發(fā)，區(qū)別是在導(dǎo)航被確認(rèn)之前菲嘴，同時(shí)在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后饿自，即在 beforeEach 和組件內(nèi)beforeRouteEnter 之后，afterEach之前調(diào)用龄坪。

【3】全局后置鉤子（afterEach）: 和beforeEach相反昭雌，它是在路由跳轉(zhuǎn)完成后觸發(fā)，它發(fā)生在beforeEach和beforeResolve之后健田，beforeRouteEnter（組件內(nèi)守衛(wèi)）之前烛卧。這些鉤子不會接受next函數(shù)也不會改變導(dǎo)航本身

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

【4】路由獨(dú)享守衛(wèi)（beforeEnter）: 和beforeEach完全相同，如果兩個(gè)都設(shè)置了妓局，beforeEnter則在beforeEach之后緊隨執(zhí)行总放。在路由配置上直接定義beforeEnter守衛(wèi)

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

【5】組件內(nèi)的守衛(wèi):

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

1. beforeRouteEnter：該鉤子在全局守衛(wèi)beforeEach和獨(dú)享守衛(wèi)beforeEnter之后享完，全局beforeResolve和全局afterEach之前調(diào)用灼芭，要注意的是該守衛(wèi)內(nèi)訪問不到組件的實(shí)例，也就是this為undefined驼侠。因?yàn)樗诮M件生命周期beforeCreate階段觸發(fā)姿鸿，此時(shí)的新組件還沒有被創(chuàng)建谆吴。在這個(gè)鉤子函數(shù)中，可以通過傳一個(gè)回調(diào)給 next來訪問組件實(shí)例苛预。在導(dǎo)航被確認(rèn)的時(shí)候執(zhí)行回調(diào)句狼，并且把組件實(shí)例作為回調(diào)方法的參數(shù)。

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

2. beforeRouteUpdadte：在當(dāng)前路由改變時(shí)热某，并且該組件被復(fù)用時(shí)調(diào)用腻菇，可以通過this訪問實(shí)例。

3. beforeRouteLeave：導(dǎo)航離開該組件的對應(yīng)路由時(shí)調(diào)用昔馋，可以訪問組件實(shí)例this筹吐。這個(gè)離開守衛(wèi)通常用來禁止用戶在還未保存修改前突然離開。該導(dǎo)航可以通過next( false )來取消秘遏。

beforeRouteLeave (to, from , next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

完整的導(dǎo)航解析流程

觸發(fā)進(jìn)入其它路由
調(diào)用要離開路由的組件守衛(wèi)beforeRouteLeave
調(diào)用全局的前置守衛(wèi)beforeEach
在重用的組件里調(diào)用 beforeRouteUpdate
在路由配置里調(diào)用 beforeEnter
解析異步路由組件
在將要進(jìn)入的路由組件中調(diào)用beforeRouteEnter
調(diào)用全局的解析守衛(wèi)beforeResolve
導(dǎo)航被確認(rèn)
調(diào)用全局的后置鉤子afterEach丘薛。
觸發(fā) DOM 更新mounted。
執(zhí)行beforeRouteEnter守衛(wèi)中傳給 next的回調(diào)函數(shù)邦危。

文章每周持續(xù)更新洋侨，可以微信搜索「 前端大集錦 」第一時(shí)間閱讀，回復(fù)【視頻】【書籍】領(lǐng)取200G視頻資料和30本PDF書籍資料