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

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

前置守衛(wèi)：

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

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

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

后置守衛(wèi)：

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

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

在路由實例注冊的:

beforeEach、beforeResolve、afterEach

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

beforeEnter

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

beforeRouteLeave、beforeRouteUpdate、beforeRouteEnter

好了我們要去榨取對應的守衛(wèi)了，

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

 // 拿到路由跳轉中更新、摧毀、激活時對應展示的組件。
 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)
    )

一個queue的順序：

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

全局的beforeEach組件。

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

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

加載要被激活的異步組件

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

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

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

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

const iterator = (hook: NavigationGuard, next) => {
      if (this.pending !== route) {
        return abort()
      }
      try {
        hook(route, current, (to: any) => {
          // 傳個false就直接執(zhí)行路由的錯誤處理，然后停止什么都不做。
          if (to === false || isError(to)) {
            // next(false) -> abort navigation, ensure current URL
            this.ensureURL(true)
            abort(to)
          } else if (
          // 如果我們接受了一個可以操作的路徑。
            typeof to === "string" ||
            (typeof to === "object" && (
              typeof to.path === "string" ||
              typeof to.name === "string"
            ))
          ) {
            // next("/") or next({ path: "/" }) -> redirect
            abort()
            // 我們就執(zhí)行路由跳轉操作，并且守衛(wèi)隊列停止下面的迭代
            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ù)的時候，fn接收第二個參數(shù)（之前畫過重點），第二個參數(shù)的回調(diào)函數(shù)是完成迭代器向下一步執(zhí)行的功能。

下面會有一點亂：

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

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

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() })
          })
        }
      })
    })

我們在把第一個queue（四個守衛(wèi)與一個異步組件的加載）執(zhí)行完畢后，要收集與執(zhí)行第二個queue了，

第二個queue：

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

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

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

下面就是updateRoute的過程。updateRoute的時候執(zhí)行全部的后置守衛(wèi)，因為更新路由之后，當前的路由已經(jīng)變化了，所以在給守衛(wèi)傳參數(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呢？因為afterEach根本不在迭代器之內(nèi)，他就沒有next來觸發(fā)迭代器的下一步。

最后我們說一下beforeEach的內(nèi)容：
我們設置beforeEach全局守衛(wèi)的時候，守衛(wèi)們存儲在哪里？

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

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

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

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

我們來回答一下開篇的5個問題

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

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

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

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

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

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

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

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