處理守衛(wèi)隊(duì)列的大錘子我們已經(jīng)制造好了，可以開工了，那你的守衛(wèi)隊(duì)列呢？？

對(duì)對(duì)對(duì)，還有守衛(wèi)隊(duì)列要收集。
這個(gè)時(shí)候我們要想想有哪些守衛(wèi)？

前置守衛(wèi)：

全局的前置守衛(wèi)： beforeEach beforeResolve

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

組件內(nèi)的守衛(wèi)： beforeRouterEnter、beforeRouterUpdate、beforeRouteLeave

后置守衛(wèi)：

全局的后置守衛(wèi)： afterEach

我們要想一下這些守衛(wèi)都是怎么注冊(cè)的，

在路由實(shí)例注冊(cè)的:

beforeEach、beforeResolve、afterEach

在路由配置中注冊(cè)的（路由獨(dú)享守衛(wèi)）:

beforeEnter

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

beforeRouteLeave、beforeRouteUpdate、beforeRouteEnter

好了我們要去榨取對(duì)應(yīng)的守衛(wèi)了，

confirmTransition的守衛(wèi)分為兩個(gè)隊(duì)列：我們先來(lái)看第一個(gè)隊(duì)列

 // 拿到路由跳轉(zhuǎn)中更新、摧毀、激活時(shí)對(duì)應(yīng)展示的組件。
 const {
      updated,
      deactivated,
      activated
    } = resolveQueue(this.current.matched, route.matched)
    // 路由守衛(wèi)
    const queue: Array = [].concat(
      // in-component leave guards
      extractLeaveGuards(deactivated),
      // global before hooks
      this.router.beforeHooks,
      // in-component update hooks
      extractUpdateHooks(updated),
      // in-config enter guards
      activated.map(m => m.beforeEnter),
      // async components
      resolveAsyncComponents(activated)
    )

一個(gè)queue的順序：

拿到被摧毀的組件的，榨取出所有組件內(nèi)的離開守衛(wèi)。

全局的beforeEach組件。

拿到更新的所有組件，榨取出所有組件內(nèi)的更新守衛(wèi)。

遍歷要進(jìn)入的路由，拿到所有路由的獨(dú)享守衛(wèi)。

加載要被激活的異步組件

7個(gè)守衛(wèi)中的4個(gè)守衛(wèi)都在被按順序拿出來(lái)了，放入第一個(gè)queue。

再下一步要有一個(gè)處理守衛(wèi)的迭代器：

保證在守衛(wèi)中可以停止并且跳轉(zhuǎn)到其余路由，

保證守衛(wèi)可以正常通過(guò)，

const iterator = (hook: NavigationGuard, next) => {
      if (this.pending !== route) {
        return abort()
      }
      try {
        hook(route, current, (to: any) => {
          // 傳個(gè)false就直接執(zhí)行路由的錯(cuò)誤處理，然后停止什么都不做。
          if (to === false || isError(to)) {
            // next(false) -> abort navigation, ensure current URL
            this.ensureURL(true)
            abort(to)
          } else if (
          // 如果我們接受了一個(gè)可以操作的路徑。
            typeof to === "string" ||
            (typeof to === "object" && (
              typeof to.path === "string" ||
              typeof to.name === "string"
            ))
          ) {
            // next("/") or next({ path: "/" }) -> redirect
            abort()
            // 我們就執(zhí)行路由跳轉(zhuǎn)操作，并且守衛(wèi)隊(duì)列停止下面的迭代
            if (typeof to === "object" && to.replace) {
              this.replace(to)
            } else {
              this.push(to)
            }
          } else {
            // confirm transition and pass on the value
            // 接續(xù)迭代下去咯
            next(to)
          }
        })
      } catch (e) {
        abort(e)
      }
    }

next函數(shù)，之前在將runQueue的函數(shù)的時(shí)候，fn接收第二個(gè)參數(shù)（之前畫過(guò)重點(diǎn)），第二個(gè)參數(shù)的回調(diào)函數(shù)是完成迭代器向下一步執(zhí)行的功能。

下面會(huì)有一點(diǎn)亂：

所有的前置守衛(wèi)都接收三個(gè)參數(shù)

beforeEnter（to,from,next）=>{
    //這個(gè)next就是我們看到的 hook里面接收的箭頭函數(shù)（(to:any)=>{}）
    //這個(gè)箭頭函數(shù)里面對(duì)迭代器的next進(jìn)行了一下掉用，
    //保證在一定情況下迭代器可以向下走一步。
    next("/index")
    // 我們?cè)谶@種next("/index")傳遞一個(gè)可以執(zhí)行的路徑時(shí)，(to:any)=>{}
    //這個(gè)箭頭函數(shù)并不會(huì)調(diào)用迭代的next，而是跳轉(zhuǎn)別的路徑執(zhí)行了push操作。
    // 如果我們不掉用守衛(wèi)中的next，迭代器的next肯定并不會(huì)執(zhí)行，守衛(wèi)的迭代就停止了，
    // 守衛(wèi)堵塞confirmTransition并不會(huì)執(zhí)行完畢，也就不會(huì)由后面的更細(xì)路由操作了。
}

runQueue(queue, iterator, () => {
      const postEnterCbs = []
      const isValid = () => this.current === route
      // wait until async components are resolved before
      // extracting in-component enter guards
      const enterGuards = extractEnterGuards(activated, postEnterCbs, isValid)
      const queue = enterGuards.concat(this.router.resolveHooks)
      runQueue(queue, iterator, () => {
        if (this.pending !== route) {
          return abort()
        }
        this.pending = null
        onComplete(route)
        if (this.router.app) {
          this.router.app.$nextTick(() => {
            postEnterCbs.forEach(cb => { cb() })
          })
        }
      })
    })

我們?cè)诎训谝粋€(gè)queue（四個(gè)守衛(wèi)與一個(gè)異步組件的加載）執(zhí)行完畢后，要收集與執(zhí)行第二個(gè)queue了，

第二個(gè)queue：

收集了被的激活組件內(nèi)的進(jìn)入守衛(wèi)

全局的beforeResolve的守衛(wèi)

收集完開始執(zhí)行第二個(gè)queue的迭代。第二個(gè)queue執(zhí)行完執(zhí)行一下onComplete函數(shù)，代表著confirmTransition方法執(zhí)行完畢了。確認(rèn)路由的過(guò)程結(jié)束了，

下面就是updateRoute的過(guò)程。updateRoute的時(shí)候執(zhí)行全部的后置守衛(wèi)，因?yàn)楦侣酚芍?，?dāng)前的路由已經(jīng)變化了，所以在給守衛(wèi)傳參數(shù)的時(shí)候緩存了一下，之前的路由。

updateRoute (route: Route) {
    const prev = this.current
    this.current = route
    this.cb && this.cb(route)
    this.router.afterHooks.forEach(hook => {
      hook && hook(route, prev)
    })
  }

所以為什么afterEach沒有next呢？因?yàn)閍fterEach根本不在迭代器之內(nèi)，他就沒有next來(lái)觸發(fā)迭代器的下一步。

最后我們說(shuō)一下beforeEach的內(nèi)容：
我們?cè)O(shè)置beforeEach全局守衛(wèi)的時(shí)候，守衛(wèi)們存儲(chǔ)在哪里？

beforeEach (fn: Function): Function {
    return registerHook(this.beforeHooks, fn)
}
function registerHook (list: Array, fn: Function): Function {
  list.push(fn)
  // 返回值是一個(gè)function
  return () => {
    const i = list.indexOf(fn)
    if (i > -1) list.splice(i, 1)
  }
}

這段代碼beforeEach是通過(guò)注冊(cè)守衛(wèi)的方式，將注冊(cè)的全局前置守衛(wèi)放在beforeHooks的容器內(nèi)，這個(gè)容器里面裝載著所有的前置守衛(wèi)

一家人（全局的 前置進(jìn)入、前置resolve、后置守衛(wèi)）整整齊齊的放在對(duì)應(yīng)的容器里面，容器是個(gè)數(shù)組，所以注冊(cè)全局守衛(wèi)的時(shí)候，是支持注冊(cè)多個(gè)的，

router.beforeEach(()=>{xxx});
router.beforeEach(()=>{yyy});
// 這兩個(gè)守衛(wèi)都會(huì)執(zhí)行，只是先注冊(cè)的先執(zhí)行，
// registerHook這個(gè)方法還可以清除對(duì)應(yīng)的守衛(wèi)，這個(gè)方法也可以使用

我們來(lái)回答一下開篇的5個(gè)問(wèn)題

beforeRouteLeave < beforeEach < beforeRouteUpdate < beforeEnter < beforeRouteEnter < beforeResolve < afterEach

next的作用，使導(dǎo)航守衛(wèi)隊(duì)列的繼續(xù)向下迭代

afterEach根本不在導(dǎo)航守衛(wèi)隊(duì)列內(nèi)，沒有迭代的next

beforeEach是可以疊加的，所有的全局前置守衛(wèi)按順序存放在beforeHooks的數(shù)組里面，

路由跳轉(zhuǎn)的核心方法是transitionTo，在跳轉(zhuǎn)過(guò)程中經(jīng)歷了一次confirmTransition，

（beforeRouteLeave < beforeEach < beforeRouteUpdate < beforeEnter < 異步組件加載）這樣順序的queue為第一個(gè)，

在第一個(gè)queue迭代完畢后，執(zhí)行第二個(gè)（beforeRouteEnter < beforeResolve）這樣順序的queue，

在執(zhí)行完畢后，開始執(zhí)行updateRoute，之后執(zhí)行全局的afterEach守衛(wèi)。最后完成路由的跳轉(zhuǎn)。