vueRouter--路由導(dǎo)航守衛(wèi)解析

導(dǎo)航守衛(wèi)可以理解為切換路由時進(jìn)行的一系列鉤子調(diào)用瓮孙，在這些鉤子中我們可以決定是否觸發(fā)下一個鉤子盗尸，是否需要重定向路由，以及處理一些必要的數(shù)據(jù)等等佃延，這些決定了路由是否可以切換现诀。導(dǎo)航守衛(wèi)可分為全局守衛(wèi)，路由守衛(wèi)履肃，和組件內(nèi)守衛(wèi)仔沿。守衛(wèi)是異步執(zhí)行的，一個路由導(dǎo)航（或者說路由切換）在所有守衛(wèi)執(zhí)行完之前一直處于等待中尺棋。

全局前置守衛(wèi)

可以使用 router.beforeEach 注冊一個全局前置守衛(wèi)于未。當(dāng)一個導(dǎo)航觸發(fā)時，全局前置守衛(wèi)被調(diào)用陡鹃。守衛(wèi)會接收三個參數(shù)：to,from,next烘浦。

to: Route: 即將要進(jìn)入的目標(biāo) 路由對象
from: Route: 當(dāng)前導(dǎo)航正要離開的路由
next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)萍鲸。
- next(): 進(jìn)行管道中的下一個鉤子闷叉。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed (確認(rèn)的)脊阴。
- next(false): 中斷當(dāng)前的導(dǎo)航握侧。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕)，那么 URL 地址會重置到 from 路由對應(yīng)的地址嘿期。
- next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個不同的地址品擎。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個新的導(dǎo)航备徐。你可以向 next 傳遞任意位置對象萄传，且允許設(shè)置諸如 replace: true、name: 'home' 之類的選項(xiàng)以及任何用在 router-link 的 to prop
- next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個 Error 實(shí)例蜜猾，則導(dǎo)航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調(diào)秀菱。

**確保要調(diào)用next 方法振诬，否則鉤子就不會被 resolved⊙芰猓可以認(rèn)為是路由切換終止**

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

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

全局解析守衛(wèi)

可以用 router.beforeResolve 注冊一個全局守衛(wèi)赶么。這和 router.beforeEach 類似，區(qū)別是在導(dǎo)航被確認(rèn)之前脊串，同時在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后辫呻，解析守衛(wèi)就被調(diào)用

全局后置鉤子

可以用router.afterEach注冊全局后置鉤子，然而要注意的是琼锋，該鉤子不會接受 next 函數(shù)放闺，執(zhí)行到該鉤子時，表示導(dǎo)航被確認(rèn)斩例，允許切換路由

路由獨(dú)享的守衛(wèi)

可以在路由配置上直接定義 beforeEnter 守衛(wèi)

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

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

可以在路由組件內(nèi)直接定義以下路由導(dǎo)航守衛(wèi)：
beforeRouteEnter雄人，beforeRouteUpdate (2.2 新增)，beforeRouteLeave

const Foo = {
  template: `...`,
  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ù)用時調(diào)用
    // 舉例來說旗吁，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候停局，
    // 由于會渲染同樣的 Foo 組件很钓，因此組件實(shí)例會被復(fù)用。而這個鉤子就會在這個情況下被調(diào)用董栽。
    // 可以訪問組件實(shí)例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用
    // 可以訪問組件實(shí)例 `this`
  }
}

beforeRouteEnter 守衛(wèi) 不能訪問 this码倦，因?yàn)槭匦l(wèi)在導(dǎo)航確認(rèn)前被調(diào)用,因此即將登場的新組件還沒被創(chuàng)建。

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

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

注意 beforeRouteEnter 是支持給 next 傳遞回調(diào)的唯一守衛(wèi)推汽。對于 beforeRouteUpdate 和 beforeRouteLeave 來說，this 已經(jīng)可用了歧沪，所以不支持傳遞回調(diào)歹撒，因?yàn)闆]有必要了。

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

導(dǎo)航被觸發(fā)诊胞。比如使用this.$router.push('/xxx/xxx/xxx')切換路由
在失活的組件里調(diào)用離開守衛(wèi)暖夭。
調(diào)用全局的 beforeEach 守衛(wèi)。
在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi) (2.2+)。
在路由配置里調(diào)用 beforeEnter鳞尔。
解析異步路由組件嬉橙。
在被激活的組件里調(diào)用 beforeRouteEnter早直。
調(diào)用全局的 beforeResolve 守衛(wèi) (2.5+)寥假。
導(dǎo)航被確認(rèn)。
調(diào)用全局的 afterEach 鉤子霞扬。
觸發(fā) DOM 更新糕韧。
用創(chuàng)建好的實(shí)例調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)。

概括如下

首先根據(jù)切換前后的路由喻圃，判斷哪些路由組件要離開萤彩，然后觸發(fā)離開的路由組件中的beforeRouteLeave鉤子（記得在鉤子函數(shù)中next()）；

然后觸發(fā)全局鉤子beforeEach()斧拍，

然后再觸發(fā)不用離開的路由組件的beforeRouteUpdate (2.2+)鉤子（這個鉤子因?yàn)樽罱鼘?shí)例是創(chuàng)建好的雀扶，所以可以使用this），

再觸發(fā)新進(jìn)入路由的路由守衛(wèi) beforeEnter

然后觸發(fā)新進(jìn)入路由的組件內(nèi)鉤子beforeRouteEnter（這個鉤子不能使用this肆汹，可以給next傳回調(diào)愚墓，這是組件3個鉤子中唯一的一個，也是所有鉤子中唯一的一個）

然后觸發(fā)全局鉤子 beforeResolve (2.5+）昂勉，

然后導(dǎo)航確認(rèn)浪册，

然后觸發(fā)全局 afterEach 鉤子，

然后正式切換路由