VueRouter 源碼深度解析

時間 2019-11-06

標籤 vuerouter 源碼深度解析简体版

原文原文鏈接

路由原理

在解析源碼前，先來了解下前端路由的實現原理。前端路由實現起來其實很簡單，本質就是監聽 URL 的變化，而後匹配路由規則，顯示相應的頁面，而且無須刷新。目前單頁面使用的路由就只有兩種實現方式前端

hash 模式
history 模式

www.test.com/#/ 就是 Hash URL，當 # 後面的哈希值發生變化時，不會向服務器請求數據，能夠經過 hashchange 事件來監聽到 URL 的變化，從而進行跳轉頁面。node

History 模式是 HTML5 新推出的功能，比之 Hash URL 更加美觀數組

VueRouter 源碼解析

重要函數思惟導圖

如下思惟導圖羅列了源碼中重要的一些函數服務器

路由註冊

在開始以前，推薦你們 clone 一份源碼對照着看。由於篇幅較長，函數間的跳轉也不少。閉包

使用路由以前，須要調用 Vue.use(VueRouter)，這是由於讓插件可使用 Vueapp

export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) {
    // 判斷重複安裝插件
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }
    const args = toArray(arguments, 1)
    // 插入 Vue
    args.unshift(this)
    // 通常插件都會有一個 install 函數
    // 經過該函數讓插件可使用 Vue
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    installedPlugins.push(plugin)
    return this
  }
}
複製代碼

接下來看下 install 函數的部分實現框架

export function install (Vue) {
  // 確保 install 調用一次
  if (install.installed && _Vue === Vue) return
  install.installed = true
  // 把 Vue 賦值給全局變量
  _Vue = Vue
  const registerInstance = (vm, callVal) => {
    let i = vm.$options._parentVnode
    if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
      i(vm, callVal)
    }
  }
  // 給每一個組件的鉤子函數混入實現
  // 能夠發如今 `beforeCreate` 鉤子執行時
  // 會初始化路由
  Vue.mixin({
    beforeCreate () {
      // 判斷組件是否存在 router 對象，該對象只在根組件上有
      if (isDef(this.$options.router)) {
        // 根路由設置爲本身
        this._routerRoot = this
        this._router = this.$options.router
        // 初始化路由
        this._router.init(this)
        // 很重要，爲 _route 屬性實現雙向綁定
        // 觸發組件渲染
        Vue.util.defineReactive(this, '_route', this._router.history.current)
      } else {
        // 用於 router-view 層級判斷
        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
      }
      registerInstance(this, this)
    },
    destroyed () {
      registerInstance(this)
    }
  })
  // 全局註冊組件 router-link 和 router-view
  Vue.component('RouterView', View)
  Vue.component('RouterLink', Link)
}
複製代碼

對於路由註冊來講，核心就是調用 Vue.use(VueRouter)，使得 VueRouter 可使用 Vue。而後經過 Vue 來調用 VueRouter 的 install 函數。在該函數中，核心就是給組件混入鉤子函數和全局註冊兩個路由組件。異步

VueRouter 實例化

在安裝插件後，對 VueRouter 進行實例化。async

const Home = { template: '<div>home</div>' }
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 3. Create the router
const router = new VueRouter({
  mode: 'hash',
  base: __dirname,
  routes: [
    { path: '/', component: Home }, // all paths are defined without the hash.
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})
複製代碼

來看一下 VueRouter 的構造函數函數

constructor(options: RouterOptions = {}) {
    // ...
    // 路由匹配對象
    this.matcher = createMatcher(options.routes || [], this)

    // 根據 mode 採起不一樣的路由方式
    let mode = options.mode || 'hash'
    this.fallback =
      mode === 'history' && !supportsPushState && options.fallback !== false
    if (this.fallback) {
      mode = 'hash'
    }
    if (!inBrowser) {
      mode = 'abstract'
    }
    this.mode = mode

    switch (mode) {
      case 'history':
        this.history = new HTML5History(this, options.base)
        break
      case 'hash':
        this.history = new HashHistory(this, options.base, this.fallback)
        break
      case 'abstract':
        this.history = new AbstractHistory(this, options.base)
        break
      default:
        if (process.env.NODE_ENV !== 'production') {
          assert(false, `invalid mode: ${mode}`)
        }
    }
  }
複製代碼

在實例化 VueRouter 的過程當中，核心是建立一個路由匹配對象，而且根據 mode 來採起不一樣的路由方式。

建立路由匹配對象

export function createMatcher ( routes: Array<RouteConfig>, router: VueRouter ): Matcher {
    // 建立路由映射表
  const { pathList, pathMap, nameMap } = createRouteMap(routes)
    
  function addRoutes (routes) {
    createRouteMap(routes, pathList, pathMap, nameMap)
  }
  // 路由匹配
  function match ( raw: RawLocation, currentRoute?: Route, redirectedFrom?: Location ): Route {
    //...
  }

  return {
    match,
    addRoutes
  }
}
複製代碼

createMatcher 函數的做用就是建立路由映射表，而後經過閉包的方式讓 addRoutes 和 match 函數可以使用路由映射表的幾個對象，最後返回一個 Matcher 對象。

接下來看 createMatcher 函數時如何建立映射表的

export function createRouteMap ( routes: Array<RouteConfig>, oldPathList?: Array<string>, oldPathMap?: Dictionary<RouteRecord>, oldNameMap?: Dictionary<RouteRecord> ): {
  pathList: Array<string>;
  pathMap: Dictionary<RouteRecord>;
  nameMap: Dictionary<RouteRecord>;
} {
  // 建立映射表
  const pathList: Array<string> = oldPathList || []
  const pathMap: Dictionary<RouteRecord> = oldPathMap || Object.create(null)
  const nameMap: Dictionary<RouteRecord> = oldNameMap || Object.create(null)
  // 遍歷路由配置，爲每一個配置添加路由記錄
  routes.forEach(route => {
    addRouteRecord(pathList, pathMap, nameMap, route)
  })
  // 確保通配符在最後
  for (let i = 0, l = pathList.length; i < l; i++) {
    if (pathList[i] === '*') {
      pathList.push(pathList.splice(i, 1)[0])
      l--
      i--
    }
  }
  return {
    pathList,
    pathMap,
    nameMap
  }
}
// 添加路由記錄
function addRouteRecord ( pathList: Array<string>, pathMap: Dictionary<RouteRecord>, nameMap: Dictionary<RouteRecord>, route: RouteConfig, parent?: RouteRecord, matchAs?: string ) {
  // 得到路由配置下的屬性
  const { path, name } = route
  const pathToRegexpOptions: PathToRegexpOptions = route.pathToRegexpOptions || {}
  // 格式化 url，替換 / 
  const normalizedPath = normalizePath(
    path,
    parent,
    pathToRegexpOptions.strict
  )
  // 生成記錄對象
  const record: RouteRecord = {
    path: normalizedPath,
    regex: compileRouteRegex(normalizedPath, pathToRegexpOptions),
    components: route.components || { default: route.component },
    instances: {},
    name,
    parent,
    matchAs,
    redirect: route.redirect,
    beforeEnter: route.beforeEnter,
    meta: route.meta || {},
    props: route.props == null
      ? {}
      : route.components
        ? route.props
        : { default: route.props }
  }

  if (route.children) {
    // 遞歸路由配置的 children 屬性，添加路由記錄
    route.children.forEach(child => {
      const childMatchAs = matchAs
        ? cleanPath(`${matchAs}/${child.path}`)
        : undefined
      addRouteRecord(pathList, pathMap, nameMap, child, record, childMatchAs)
    })
  }
  // 若是路由有別名的話
  // 給別名也添加路由記錄
  if (route.alias !== undefined) {
    const aliases = Array.isArray(route.alias)
      ? route.alias
      : [route.alias]

    aliases.forEach(alias => {
      const aliasRoute = {
        path: alias,
        children: route.children
      }
      addRouteRecord(
        pathList,
        pathMap,
        nameMap,
        aliasRoute,
        parent,
        record.path || '/' // matchAs
      )
    })
  }
  // 更新映射表
  if (!pathMap[record.path]) {
    pathList.push(record.path)
    pathMap[record.path] = record
  }
  // 命名路由添加記錄
  if (name) {
    if (!nameMap[name]) {
      nameMap[name] = record
    } else if (process.env.NODE_ENV !== 'production' && !matchAs) {
      warn(
        false,
        `Duplicate named routes definition: ` +
        `{ name: "${name}", path: "${record.path}" }`
      )
    }
  }
}
複製代碼

以上就是建立路由匹配對象的全過程，經過用戶配置的路由規則來建立對應的路由映射表。

路由初始化

當根組件調用 beforeCreate 鉤子函數時，會執行如下代碼

beforeCreate () {
// 只有根組件有 router 屬性，因此根組件初始化時會初始化路由
  if (isDef(this.$options.router)) {
    this._routerRoot = this
    this._router = this.$options.router
    this._router.init(this)
    Vue.util.defineReactive(this, '_route', this._router.history.current)
  } else {
    this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
  }
  registerInstance(this, this)
}
複製代碼

接下來看下路由初始化會作些什麼

init(app: any /* Vue component instance */) {
    // 保存組件實例
    this.apps.push(app)
    // 若是根組件已經有了就返回
    if (this.app) {
      return
    }
    this.app = app
    // 賦值路由模式
    const history = this.history
    // 判斷路由模式，以哈希模式爲例
    if (history instanceof HTML5History) {
      history.transitionTo(history.getCurrentLocation())
    } else if (history instanceof HashHistory) {
      // 添加 hashchange 監聽
      const setupHashListener = () => {
        history.setupListeners()
      }
      // 路由跳轉
      history.transitionTo(
        history.getCurrentLocation(),
        setupHashListener,
        setupHashListener
      )
    }
    // 該回調會在 transitionTo 中調用
    // 對組件的 _route 屬性進行賦值，觸發組件渲染
    history.listen(route => {
      this.apps.forEach(app => {
        app._route = route
      })
    })
  }
複製代碼

在路由初始化時，核心就是進行路由的跳轉，改變 URL 而後渲染對應的組件。接下來來看一下路由是如何進行跳轉的。

路由跳轉

transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  // 獲取匹配的路由信息
  const route = this.router.match(location, this.current)
  // 確認切換路由
  this.confirmTransition(route, () => {
    // 如下爲切換路由成功或失敗的回調
    // 更新路由信息，對組件的 _route 屬性進行賦值，觸發組件渲染
    // 調用 afterHooks 中的鉤子函數
    this.updateRoute(route)
    // 添加 hashchange 監聽
    onComplete && onComplete(route)
    // 更新 URL
    this.ensureURL()
    // 只執行一次 ready 回調
    if (!this.ready) {
      this.ready = true
      this.readyCbs.forEach(cb => { cb(route) })
    }
  }, err => {
  // 錯誤處理
    if (onAbort) {
      onAbort(err)
    }
    if (err && !this.ready) {
      this.ready = true
      this.readyErrorCbs.forEach(cb => { cb(err) })
    }
  })
}
複製代碼

在路由跳轉中，須要先獲取匹配的路由信息，因此先來看下如何獲取匹配的路由信息

function match ( raw: RawLocation, currentRoute?: Route, redirectedFrom?: Location ): Route {
  // 序列化 url
  // 好比對於該 url 來講 /abc?foo=bar&baz=qux#hello
  // 會序列化路徑爲 /abc
  // 哈希爲 #hello
  // 參數爲 foo: 'bar', baz: 'qux'
  const location = normalizeLocation(raw, currentRoute, false, router)
  const { name } = location
  // 若是是命名路由，就判斷記錄中是否有該命名路由配置
  if (name) {
    const record = nameMap[name]
    // 沒找到表示沒有匹配的路由
    if (!record) return _createRoute(null, location)
    const paramNames = record.regex.keys
      .filter(key => !key.optional)
      .map(key => key.name)
    // 參數處理
    if (typeof location.params !== 'object') {
      location.params = {}
    }
    if (currentRoute && typeof currentRoute.params === 'object') {
      for (const key in currentRoute.params) {
        if (!(key in location.params) && paramNames.indexOf(key) > -1) {
          location.params[key] = currentRoute.params[key]
        }
      }
    }
    if (record) {
      location.path = fillParams(record.path, location.params, `named route "${name}"`)
      return _createRoute(record, location, redirectedFrom)
    }
  } else if (location.path) {
    // 非命名路由處理
    location.params = {}
    for (let i = 0; i < pathList.length; i++) {
     // 查找記錄
      const path = pathList[i]
      const record = pathMap[path]
      // 若是匹配路由，則建立路由
      if (matchRoute(record.regex, location.path, location.params)) {
        return _createRoute(record, location, redirectedFrom)
      }
    }
  }
  // 沒有匹配的路由
  return _createRoute(null, location)
}
複製代碼

接下來看看如何建立路由

// 根據條件建立不一樣的路由
function _createRoute( record: ?RouteRecord, location: Location, redirectedFrom?: Location ): Route {
  if (record && record.redirect) {
    return redirect(record, redirectedFrom || location)
  }
  if (record && record.matchAs) {
    return alias(record, location, record.matchAs)
  }
  return createRoute(record, location, redirectedFrom, router)
}

export function createRoute ( record: ?RouteRecord, location: Location, redirectedFrom?: ?Location, router?: VueRouter ): Route {
  const stringifyQuery = router && router.options.stringifyQuery
  // 克隆參數
  let query: any = location.query || {}
  try {
    query = clone(query)
  } catch (e) {}
  // 建立路由對象
  const route: Route = {
    name: location.name || (record && record.name),
    meta: (record && record.meta) || {},
    path: location.path || '/',
    hash: location.hash || '',
    query,
    params: location.params || {},
    fullPath: getFullPath(location, stringifyQuery),
    matched: record ? formatMatch(record) : []
  }
  if (redirectedFrom) {
    route.redirectedFrom = getFullPath(redirectedFrom, stringifyQuery)
  }
  // 讓路由對象不可修改
  return Object.freeze(route)
}
// 得到包含當前路由的全部嵌套路徑片斷的路由記錄
// 包含從根路由到當前路由的匹配記錄，從上至下
function formatMatch(record: ?RouteRecord): Array<RouteRecord> {
  const res = []
  while (record) {
    res.unshift(record)
    record = record.parent
  }
  return res
}
複製代碼

至此匹配路由已經完成，咱們回到 transitionTo 函數中，接下來執行 confirmTransition

transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  // 確認切換路由
  this.confirmTransition(route, () => {}
}
confirmTransition(route: Route, onComplete: Function, onAbort?: Function) {
  const current = this.current
  // 中斷跳轉路由函數
  const abort = err => {
    if (isError(err)) {
      if (this.errorCbs.length) {
        this.errorCbs.forEach(cb => {
          cb(err)
        })
      } else {
        warn(false, 'uncaught error during route navigation:')
        console.error(err)
      }
    }
    onAbort && onAbort(err)
  }
  // 若是是相同的路由就不跳轉
  if (
    isSameRoute(route, current) &&
    route.matched.length === current.matched.length
  ) {
    this.ensureURL()
    return abort()
  }
  // 經過對比路由解析出可複用的組件，須要渲染的組件，失活的組件
  const { updated, deactivated, activated } = resolveQueue(
    this.current.matched,
    route.matched
  )
  
  function resolveQueue( current: Array<RouteRecord>, next: Array<RouteRecord> ): {
      updated: Array<RouteRecord>,
      activated: Array<RouteRecord>,
      deactivated: Array<RouteRecord>
    } {
      let i
      const max = Math.max(current.length, next.length)
      for (i = 0; i < max; i++) {
        // 當前路由路徑和跳轉路由路徑不一樣時跳出遍歷
        if (current[i] !== next[i]) {
          break
        }
      }
      return {
        // 可複用的組件對應路由
        updated: next.slice(0, i),
        // 須要渲染的組件對應路由
        activated: next.slice(i),
        // 失活的組件對應路由
        deactivated: current.slice(i)
      }
  }
  // 導航守衛數組
  const queue: Array<?NavigationGuard> = [].concat(
    // 失活的組件鉤子
    extractLeaveGuards(deactivated),
    // 全局 beforeEach 鉤子
    this.router.beforeHooks,
    // 在當前路由改變，可是該組件被複用時調用
    extractUpdateHooks(updated),
    // 須要渲染組件 enter 守衛鉤子
    activated.map(m => m.beforeEnter),
    // 解析異步路由組件
    resolveAsyncComponents(activated)
  )
  // 保存路由
  this.pending = route
  // 迭代器，用於執行 queue 中的導航守衛鉤子
  const iterator = (hook: NavigationGuard, next) => {
  // 路由不相等就不跳轉路由
    if (this.pending !== route) {
      return abort()
    }
    try {
    // 執行鉤子
      hook(route, current, (to: any) => {
        // 只有執行了鉤子函數中的 next，纔會繼續執行下一個鉤子函數
        // 不然會暫停跳轉
        // 如下邏輯是在判斷 next() 中的傳參
        if (to === false || isError(to)) {
          // next(false) 
          this.ensureURL(true)
          abort(to)
        } else if (
          typeof to === 'string' ||
          (typeof to === 'object' &&
            (typeof to.path === 'string' || typeof to.name === 'string'))
        ) {
        // next('/') 或者 next({ path: '/' }) -> 重定向
          abort()
          if (typeof to === 'object' && to.replace) {
            this.replace(to)
          } else {
            this.push(to)
          }
        } else {
        // 這裏執行 next
        // 也就是執行下面函數 runQueue 中的 step(index + 1)
          next(to)
        }
      })
    } catch (e) {
      abort(e)
    }
  }
  // 經典的同步執行異步函數
  runQueue(queue, iterator, () => {
    const postEnterCbs = []
    const isValid = () => this.current === route
    // 當全部異步組件加載完成後，會執行這裏的回調，也就是 runQueue 中的 cb()
    // 接下來執行 須要渲染組件的導航守衛鉤子
    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()
          })
        })
      }
    })
  })
}
export function runQueue (queue: Array<?NavigationGuard>, fn: Function, cb: Function) {
  const step = index => {
  // 隊列中的函數都執行完畢，就執行回調函數
    if (index >= queue.length) {
      cb()
    } else {
      if (queue[index]) {
      // 執行迭代器，用戶在鉤子函數中執行 next() 回調
      // 回調中判斷傳參，沒有問題就執行 next()，也就是 fn 函數中的第二個參數
        fn(queue[index], () => {
          step(index + 1)
        })
      } else {
        step(index + 1)
      }
    }
  }
  // 取出隊列中第一個鉤子函數
  step(0)
}
複製代碼

接下來介紹導航守衛

const queue: Array<?NavigationGuard> = [].concat(
    // 失活的組件鉤子
    extractLeaveGuards(deactivated),
    // 全局 beforeEach 鉤子
    this.router.beforeHooks,
    // 在當前路由改變，可是該組件被複用時調用
    extractUpdateHooks(updated),
    // 須要渲染組件 enter 守衛鉤子
    activated.map(m => m.beforeEnter),
    // 解析異步路由組件
    resolveAsyncComponents(activated)
)
複製代碼

第一步是先執行失活組件的鉤子函數

function extractLeaveGuards(deactivated: Array<RouteRecord>): Array<?Function> {
// 傳入須要執行的鉤子函數名
  return extractGuards(deactivated, 'beforeRouteLeave', bindGuard, true)
}
function extractGuards( records: Array<RouteRecord>, name: string, bind: Function, reverse?: boolean ): Array<?Function> {
  const guards = flatMapComponents(records, (def, instance, match, key) => {
   // 找出組件中對應的鉤子函數
    const guard = extractGuard(def, name)
    if (guard) {
    // 給每一個鉤子函數添加上下文對象爲組件自身
      return Array.isArray(guard)
        ? guard.map(guard => bind(guard, instance, match, key))
        : bind(guard, instance, match, key)
    }
  })
  // 數組降維，而且判斷是否須要翻轉數組
  // 由於某些鉤子函數須要從子執行到父
  return flatten(reverse ? guards.reverse() : guards)
}
export function flatMapComponents ( matched: Array<RouteRecord>, fn: Function ): Array<?Function> {
// 數組降維
  return flatten(matched.map(m => {
  // 將組件中的對象傳入回調函數中，得到鉤子函數數組
    return Object.keys(m.components).map(key => fn(
      m.components[key],
      m.instances[key],
      m, key
    ))
  }))
}
複製代碼

第二步執行全局 beforeEach 鉤子函數

beforeEach(fn: Function): Function {
    return registerHook(this.beforeHooks, fn)
}
function registerHook(list: Array<any>, fn: Function): Function {
  list.push(fn)
  return () => {
    const i = list.indexOf(fn)
    if (i > -1) list.splice(i, 1)
  }
}
複製代碼

在 VueRouter 類中有以上代碼，每當給 VueRouter 實例添加 beforeEach 函數時就會將函數 push 進 beforeHooks 中。

第三步執行 beforeRouteUpdate 鉤子函數，調用方式和第一步相同，只是傳入的函數名不一樣，在該函數中能夠訪問到 this 對象。

第四步執行 beforeEnter 鉤子函數，該函數是路由獨享的鉤子函數。

第五步是解析異步組件。

export function resolveAsyncComponents (matched: Array<RouteRecord>): Function {
  return (to, from, next) => {
    let hasAsync = false
    let pending = 0
    let error = null
    // 該函數做用以前已經介紹過了
    flatMapComponents(matched, (def, _, match, key) => {
    // 判斷是不是異步組件
      if (typeof def === 'function' && def.cid === undefined) {
        hasAsync = true
        pending++
        // 成功回調
        // once 函數確保異步組件只加載一次
        const resolve = once(resolvedDef => {
          if (isESModule(resolvedDef)) {
            resolvedDef = resolvedDef.default
          }
          // 判斷是不是構造函數
          // 不是的話經過 Vue 來生成組件構造函數
          def.resolved = typeof resolvedDef === 'function'
            ? resolvedDef
            : _Vue.extend(resolvedDef)
        // 賦值組件
        // 若是組件所有解析完畢，繼續下一步
          match.components[key] = resolvedDef
          pending--
          if (pending <= 0) {
            next()
          }
        })
        // 失敗回調
        const reject = once(reason => {
          const msg = `Failed to resolve async component ${key}: ${reason}`
          process.env.NODE_ENV !== 'production' && warn(false, msg)
          if (!error) {
            error = isError(reason)
              ? reason
              : new Error(msg)
            next(error)
          }
        })
        let res
        try {
        // 執行異步組件函數
          res = def(resolve, reject)
        } catch (e) {
          reject(e)
        }
        if (res) {
        // 下載完成執行回調
          if (typeof res.then === 'function') {
            res.then(resolve, reject)
          } else {
            const comp = res.component
            if (comp && typeof comp.then === 'function') {
              comp.then(resolve, reject)
            }
          }
        }
      }
    })
    // 不是異步組件直接下一步
    if (!hasAsync) next()
  }
}
複製代碼

以上就是第一個 runQueue 中的邏輯，第五步完成後會執行第一個 runQueue 中回調函數

// 該回調用於保存 `beforeRouteEnter` 鉤子中的回調函數
const postEnterCbs = []
const isValid = () => this.current === route
// beforeRouteEnter 導航守衛鉤子
const enterGuards = extractEnterGuards(activated, postEnterCbs, isValid)
// beforeResolve 導航守衛鉤子
const queue = enterGuards.concat(this.router.resolveHooks)
runQueue(queue, iterator, () => {
  if (this.pending !== route) {
    return abort()
  }
  this.pending = null
  // 這裏會執行 afterEach 導航守衛鉤子
  onComplete(route)
  if (this.router.app) {
    this.router.app.$nextTick(() => {
      postEnterCbs.forEach(cb => {
        cb()
      })
    })
  }
})
複製代碼

第六步是執行 beforeRouteEnter 導航守衛鉤子，beforeRouteEnter 鉤子不能訪問 this 對象，由於鉤子在導航確認前被調用，須要渲染的組件還沒被建立。可是該鉤子函數是惟一一個支持在回調中獲取 this 對象的函數，回調會在路由確認執行。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 經過 `vm` 訪問組件實例
  })
}
複製代碼

下面來看看是如何支持在回調中拿到 this 對象的

function extractEnterGuards( activated: Array<RouteRecord>, cbs: Array<Function>, isValid: () => boolean ): Array<?Function> {
// 這裏和以前調用導航守衛基本一致
  return extractGuards(
    activated,
    'beforeRouteEnter',
    (guard, _, match, key) => {
      return bindEnterGuard(guard, match, key, cbs, isValid)
    }
  )
}
function bindEnterGuard( guard: NavigationGuard, match: RouteRecord, key: string, cbs: Array<Function>, isValid: () => boolean ): NavigationGuard {
  return function routeEnterGuard(to, from, next) {
    return guard(to, from, cb => {
    // 判斷 cb 是不是函數
    // 是的話就 push 進 postEnterCbs
      next(cb)
      if (typeof cb === 'function') {
        cbs.push(() => {
          // 循環直到拿到組件實例
          poll(cb, match.instances, key, isValid)
        })
      }
    })
  }
}
// 該函數是爲了解決 issus #750
// 當 router-view 外面包裹了 mode 爲 out-in 的 transition 組件 
// 會在組件初次導航到時得到不到組件實例對象
function poll( cb: any, // somehow flow cannot infer this is a function instances: Object, key: string, isValid: () => boolean ) {
  if (
    instances[key] &&
    !instances[key]._isBeingDestroyed // do not reuse being destroyed instance
  ) {
    cb(instances[key])
  } else if (isValid()) {
  // setTimeout 16ms 做用和 nextTick 基本相同
    setTimeout(() => {
      poll(cb, instances, key, isValid)
    }, 16)
  }
}
複製代碼

第七步是執行 beforeResolve 導航守衛鉤子，若是註冊了全局 beforeResolve 鉤子就會在這裏執行。

第八步就是導航確認，調用 afterEach 導航守衛鉤子了。

以上都執行完成後，會觸發組件的渲染

history.listen(route => {
      this.apps.forEach(app => {
        app._route = route
      })
})
複製代碼

以上回調會在 updateRoute 中調用

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

至此，路由跳轉已經所有分析完畢。核心就是判斷須要跳轉的路由是否存在於記錄中，而後執行各類導航守衛函數，最後完成 URL 的改變和組件的渲染。