VueRouter 源码解析

重要函数思维导图

以下思维导图罗列了源码中重要的一些函数VueRouter 源码解析 - 图1

路由注册

在开始之前，推荐大家 clone 一份源码对照着看。因为篇幅较长，函数间的跳转也很多。

使用路由之前，需要调用 Vue.use(VueRouter)，这是因为让插件可以使用 Vue 

  1. export function initUse (Vue: GlobalAPI) {
  2.   Vue.use = function (plugin: Function | Object) {
  3.     // 判断重复安装插件
  4.     const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
  5.     if (installedPlugins.indexOf(plugin) > -1) {
  6.       return this
  7.     }
  8.     const args = toArray(arguments, 1)
  9.     // 插入 Vue
  10.     args.unshift(this)
  11.     // 一般插件都会有一个 install 函数
  12.     // 通过该函数让插件可以使用 Vue
  13.     if (typeof plugin.install === 'function') {
  14.       plugin.install.apply(plugin, args)
  15.     } else if (typeof plugin === 'function') {
  16.       plugin.apply(null, args)
  17.     }
  18.     installedPlugins.push(plugin)
  19.     return this
  20.   }
  21. }

接下来看下 install 函数的部分实现

  1. export function install (Vue) {
  2.   // 确保 install 调用一次
  3.   if (install.installed && _Vue === Vue) return
  4.   install.installed = true
  5.   // 把 Vue 赋值给全局变量
  6.   _Vue = Vue
  7.   const registerInstance = (vm, callVal) => {
  8.     let i = vm.$options._parentVnode
  9.     if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
  10.       i(vm, callVal)
  11.     }
  12.   }
  13.   // 给每个组件的钩子函数混入实现
  14.   // 可以发现在 `beforeCreate` 钩子执行时
  15.   // 会初始化路由
  16.   Vue.mixin({
  17.     beforeCreate () {
  18.       // 判断组件是否存在 router 对象，该对象只在根组件上有
  19.       if (isDef(this.$options.router)) {
  20.         // 根路由设置为自己
  21.         this._routerRoot = this
  22.         this._router = this.$options.router
  23.         // 初始化路由
  24.         this._router.init(this)
  25.         // 很重要，为 _route 属性实现双向绑定
  26.         // 触发组件渲染
  27.         Vue.util.defineReactive(this, '_route', this._router.history.current)
  28.       } else {
  29.         // 用于 router-view 层级判断
  30.         this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
  31.       }
  32.       registerInstance(this, this)
  33.     },
  34.     destroyed () {
  35.       registerInstance(this)
  36.     }
  37.   })
  38.   // 全局注册组件 router-link 和 router-view
  39.   Vue.component('RouterView', View)
  40.   Vue.component('RouterLink', Link)
  41. }

对于路由注册来说，核心就是调用 Vue.use(VueRouter)，使得 VueRouter 可以使用 Vue。然后通过 Vue 来调用 VueRouter 的 install 函数。在该函数中，核心就是给组件混入钩子函数和全局注册两个路由组件。

VueRouter 实例化

在安装插件后，对 VueRouter 进行实例化。

  1. const Home = { template: '<div>home</div>' }
  2. const Foo = { template: '<div>foo</div>' }
  3. const Bar = { template: '<div>bar</div>' }
  5. // 3. Create the router
  6. const router = new VueRouter({
  7.   mode: 'hash',
  8.   base: __dirname,
  9.   routes: [
  10.     { path: '/', component: Home }, // all paths are defined without the hash.
  11.     { path: '/foo', component: Foo },
  12.     { path: '/bar', component: Bar }
  13.   ]
  14. })

来看一下 VueRouter 的构造函数

  1. constructor(options: RouterOptions = {}) {
  2.     // ...
  3.     // 路由匹配对象
  4.     this.matcher = createMatcher(options.routes || [], this)
  6.     // 根据 mode 采取不同的路由方式
  7.     let mode = options.mode || 'hash'
  8.     this.fallback =
  9.       mode === 'history' && !supportsPushState && options.fallback !== false
  10.     if (this.fallback) {
  11.       mode = 'hash'
  12.     }
  13.     if (!inBrowser) {
  14.       mode = 'abstract'
  15.     }
  16.     this.mode = mode
  18.     switch (mode) {
  19.       case 'history':
  20.         this.history = new HTML5History(this, options.base)
  21.         break
  22.       case 'hash':
  23.         this.history = new HashHistory(this, options.base, this.fallback)
  24.         break
  25.       case 'abstract':
  26.         this.history = new AbstractHistory(this, options.base)
  27.         break
  28.       default:
  29.         if (process.env.NODE_ENV !== 'production') {
  30.           assert(false, `invalid mode: ${mode}`)
  31.         }
  32.     }
  33.   }

在实例化 VueRouter 的过程中，核心是创建一个路由匹配对象，并且根据 mode 来采取不同的路由方式。

创建路由匹配对象

  1. export function createMatcher (
  2.   routes: Array<RouteConfig>,
  3.   router: VueRouter
  4. ): Matcher {
  5.     // 创建路由映射表
  6.   const { pathList, pathMap, nameMap } = createRouteMap(routes)
  8.   function addRoutes (routes) {
  9.     createRouteMap(routes, pathList, pathMap, nameMap)
  10.   }
  11.   // 路由匹配
  12.   function match (
  13.     raw: RawLocation,
  14.     currentRoute?: Route,
  15.     redirectedFrom?: Location
  16.   ): Route {
  17.     //...
  18.   }
  20.   return {
  21.     match,
  22.     addRoutes
  23.   }
  24. }

createMatcher 函数的作用就是创建路由映射表，然后通过闭包的方式让 addRoutes 和 match 函数能够使用路由映射表的几个对象，最后返回一个 Matcher 对象。

接下来看 createMatcher 函数时如何创建映射表的

  1. export function createRouteMap (
  2.   routes: Array<RouteConfig>,
  3.   oldPathList?: Array<string>,
  4.   oldPathMap?: Dictionary<RouteRecord>,
  5.   oldNameMap?: Dictionary<RouteRecord>
  6. ): {
  7.   pathList: Array<string>;
  8.   pathMap: Dictionary<RouteRecord>;
  9.   nameMap: Dictionary<RouteRecord>;
  10. } {
  11.   // 创建映射表
  12.   const pathList: Array<string> = oldPathList || []
  13.   const pathMap: Dictionary<RouteRecord> = oldPathMap || Object.create(null)
  14.   const nameMap: Dictionary<RouteRecord> = oldNameMap || Object.create(null)
  15.   // 遍历路由配置，为每个配置添加路由记录
  16.   routes.forEach(route => {
  17.     addRouteRecord(pathList, pathMap, nameMap, route)
  18.   })
  19.   // 确保通配符在最后
  20.   for (let i = 0, l = pathList.length; i < l; i++) {
  21.     if (pathList[i] === '*') {
  22.       pathList.push(pathList.splice(i, 1)[0])
  23.       l--
  24.       i--
  25.     }
  26.   }
  27.   return {
  28.     pathList,
  29.     pathMap,
  30.     nameMap
  31.   }
  32. }
  33. // 添加路由记录
  34. function addRouteRecord (
  35.   pathList: Array<string>,
  36.   pathMap: Dictionary<RouteRecord>,
  37.   nameMap: Dictionary<RouteRecord>,
  38.   route: RouteConfig,
  39.   parent?: RouteRecord,
  40.   matchAs?: string
  41. ) {
  42.   // 获得路由配置下的属性
  43.   const { path, name } = route
  44.   const pathToRegexpOptions: PathToRegexpOptions = route.pathToRegexpOptions || {}
  45.   // 格式化 url，替换 / 
  46.   const normalizedPath = normalizePath(
  47.     path,
  48.     parent,
  49.     pathToRegexpOptions.strict
  50.   )
  51.   // 生成记录对象
  52.   const record: RouteRecord = {
  53.     path: normalizedPath,
  54.     regex: compileRouteRegex(normalizedPath, pathToRegexpOptions),
  55.     components: route.components || { default: route.component },
  56.     instances: {},
  57.     name,
  58.     parent,
  59.     matchAs,
  60.     redirect: route.redirect,
  61.     beforeEnter: route.beforeEnter,
  62.     meta: route.meta || {},
  63.     props: route.props == null
  64.       ? {}
  65.       : route.components
  66.         ? route.props
  67.         : { default: route.props }
  68.   }
  70.   if (route.children) {
  71.     // 递归路由配置的 children 属性，添加路由记录
  72.     route.children.forEach(child => {
  73.       const childMatchAs = matchAs
  74.         ? cleanPath(`${matchAs}/${child.path}`)
  75.         : undefined
  76.       addRouteRecord(pathList, pathMap, nameMap, child, record, childMatchAs)
  77.     })
  78.   }
  79.   // 如果路由有别名的话
  80.   // 给别名也添加路由记录
  81.   if (route.alias !== undefined) {
  82.     const aliases = Array.isArray(route.alias)
  83.       ? route.alias
  84.       : [route.alias]
  86.     aliases.forEach(alias => {
  87.       const aliasRoute = {
  88.         path: alias,
  89.         children: route.children
  90.       }
  91.       addRouteRecord(
  92.         pathList,
  93.         pathMap,
  94.         nameMap,
  95.         aliasRoute,
  96.         parent,
  97.         record.path || '/' // matchAs
  98.       )
  99.     })
  100.   }
  101.   // 更新映射表
  102.   if (!pathMap[record.path]) {
  103.     pathList.push(record.path)
  104.     pathMap[record.path] = record
  105.   }
  106.   // 命名路由添加记录
  107.   if (name) {
  108.     if (!nameMap[name]) {
  109.       nameMap[name] = record
  110.     } else if (process.env.NODE_ENV !== 'production' && !matchAs) {
  111.       warn(
  112.         false,
  113.         `Duplicate named routes definition: ` +
  114.         `{ name: "${name}", path: "${record.path}" }`
  115.       )
  116.     }
  117.   }
  118. }

以上就是创建路由匹配对象的全过程，通过用户配置的路由规则来创建对应的路由映射表。

路由初始化

当根组件调用 beforeCreate 钩子函数时，会执行以下代码

  1. beforeCreate () {
  2. // 只有根组件有 router 属性，所以根组件初始化时会初始化路由
  3.   if (isDef(this.$options.router)) {
  4.     this._routerRoot = this
  5.     this._router = this.$options.router
  6.     this._router.init(this)
  7.     Vue.util.defineReactive(this, '_route', this._router.history.current)
  8.   } else {
  9.     this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
  10.   }
  11.   registerInstance(this, this)
  12. }

接下来看下路由初始化会做些什么

  1. init(app: any /* Vue component instance */) {
  2.     // 保存组件实例
  3.     this.apps.push(app)
  4.     // 如果根组件已经有了就返回
  5.     if (this.app) {
  6.       return
  7.     }
  8.     this.app = app
  9.     // 赋值路由模式
  10.     const history = this.history
  11.     // 判断路由模式，以哈希模式为例
  12.     if (history instanceof HTML5History) {
  13.       history.transitionTo(history.getCurrentLocation())
  14.     } else if (history instanceof HashHistory) {
  15.       // 添加 hashchange 监听
  16.       const setupHashListener = () => {
  17.         history.setupListeners()
  18.       }
  19.       // 路由跳转
  20.       history.transitionTo(
  21.         history.getCurrentLocation(),
  22.         setupHashListener,
  23.         setupHashListener
  24.       )
  25.     }
  26.     // 该回调会在 transitionTo 中调用
  27.     // 对组件的 _route 属性进行赋值，触发组件渲染
  28.     history.listen(route => {
  29.       this.apps.forEach(app => {
  30.         app._route = route
  31.       })
  32.     })
  33.   }

在路由初始化时，核心就是进行路由的跳转，改变 URL 然后渲染对应的组件。接下来来看一下路由是如何进行跳转的。

路由跳转

  1. transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  2.   // 获取匹配的路由信息
  3.   const route = this.router.match(location, this.current)
  4.   // 确认切换路由
  5.   this.confirmTransition(route, () => {
  6.     // 以下为切换路由成功或失败的回调
  7.     // 更新路由信息，对组件的 _route 属性进行赋值，触发组件渲染
  8.     // 调用 afterHooks 中的钩子函数
  9.     this.updateRoute(route)
  10.     // 添加 hashchange 监听
  11.     onComplete && onComplete(route)
  12.     // 更新 URL
  13.     this.ensureURL()
  14.     // 只执行一次 ready 回调
  15.     if (!this.ready) {
  16.       this.ready = true
  17.       this.readyCbs.forEach(cb => { cb(route) })
  18.     }
  19.   }, err => {
  20.   // 错误处理
  21.     if (onAbort) {
  22.       onAbort(err)
  23.     }
  24.     if (err && !this.ready) {
  25.       this.ready = true
  26.       this.readyErrorCbs.forEach(cb => { cb(err) })
  27.     }
  28.   })
  29. }

在路由跳转中，需要先获取匹配的路由信息，所以先来看下如何获取匹配的路由信息

  1. function match (
  2.   raw: RawLocation,
  3.   currentRoute?: Route,
  4.   redirectedFrom?: Location
  5. ): Route {
  6.   // 序列化 url
  7.   // 比如对于该 url 来说 /abc?foo=bar&baz=qux#hello
  8.   // 会序列化路径为 /abc
  9.   // 哈希为 #hello
  10.   // 参数为 foo: 'bar', baz: 'qux'
  11.   const location = normalizeLocation(raw, currentRoute, false, router)
  12.   const { name } = location
  13.   // 如果是命名路由，就判断记录中是否有该命名路由配置
  14.   if (name) {
  15.     const record = nameMap[name]
  16.     // 没找到表示没有匹配的路由
  17.     if (!record) return _createRoute(null, location)
  18.     const paramNames = record.regex.keys
  19.       .filter(key => !key.optional)
  20.       .map(key => key.name)
  21.     // 参数处理
  22.     if (typeof location.params !== 'object') {
  23.       location.params = {}
  24.     }
  25.     if (currentRoute && typeof currentRoute.params === 'object') {
  26.       for (const key in currentRoute.params) {
  27.         if (!(key in location.params) && paramNames.indexOf(key) > -1) {
  28.           location.params[key] = currentRoute.params[key]
  29.         }
  30.       }
  31.     }
  32.     if (record) {
  33.       location.path = fillParams(record.path, location.params, `named route "${name}"`)
  34.       return _createRoute(record, location, redirectedFrom)
  35.     }
  36.   } else if (location.path) {
  37.     // 非命名路由处理
  38.     location.params = {}
  39.     for (let i = 0; i < pathList.length; i++) {
  40.      // 查找记录
  41.       const path = pathList[i]
  42.       const record = pathMap[path]
  43.       // 如果匹配路由，则创建路由
  44.       if (matchRoute(record.regex, location.path, location.params)) {
  45.         return _createRoute(record, location, redirectedFrom)
  46.       }
  47.     }
  48.   }
  49.   // 没有匹配的路由
  50.   return _createRoute(null, location)
  51. }

接下来看看如何创建路由

  1. // 根据条件创建不同的路由
  2. function _createRoute(
  3.   record: ?RouteRecord,
  4.   location: Location,
  5.   redirectedFrom?: Location
  6. ): Route {
  7.   if (record && record.redirect) {
  8.     return redirect(record, redirectedFrom || location)
  9.   }
  10.   if (record && record.matchAs) {
  11.     return alias(record, location, record.matchAs)
  12.   }
  13.   return createRoute(record, location, redirectedFrom, router)
  14. }
  16. export function createRoute (
  17.   record: ?RouteRecord,
  18.   location: Location,
  19.   redirectedFrom?: ?Location,
  20.   router?: VueRouter
  21. ): Route {
  22.   const stringifyQuery = router && router.options.stringifyQuery
  23.   // 克隆参数
  24.   let query: any = location.query || {}
  25.   try {
  26.     query = clone(query)
  27.   } catch (e) {}
  28.   // 创建路由对象
  29.   const route: Route = {
  30.     name: location.name || (record && record.name),
  31.     meta: (record && record.meta) || {},
  32.     path: location.path || '/',
  33.     hash: location.hash || '',
  34.     query,
  35.     params: location.params || {},
  36.     fullPath: getFullPath(location, stringifyQuery),
  37.     matched: record ? formatMatch(record) : []
  38.   }
  39.   if (redirectedFrom) {
  40.     route.redirectedFrom = getFullPath(redirectedFrom, stringifyQuery)
  41.   }
  42.   // 让路由对象不可修改
  43.   return Object.freeze(route)
  44. }
  45. // 获得包含当前路由的所有嵌套路径片段的路由记录
  46. // 包含从根路由到当前路由的匹配记录，从上至下
  47. function formatMatch(record: ?RouteRecord): Array<RouteRecord> {
  48.   const res = []
  49.   while (record) {
  50.     res.unshift(record)
  51.     record = record.parent
  52.   }
  53.   return res
  54. }

至此匹配路由已经完成，我们回到 transitionTo 函数中，接下来执行 confirmTransition 

  1. transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  2.   // 确认切换路由
  3.   this.confirmTransition(route, () => {}
  4. }
  5. confirmTransition(route: Route, onComplete: Function, onAbort?: Function) {
  6.   const current = this.current
  7.   // 中断跳转路由函数
  8.   const abort = err => {
  9.     if (isError(err)) {
  10.       if (this.errorCbs.length) {
  11.         this.errorCbs.forEach(cb => {
  12.           cb(err)
  13.         })
  14.       } else {
  15.         warn(false, 'uncaught error during route navigation:')
  16.         console.error(err)
  17.       }
  18.     }
  19.     onAbort && onAbort(err)
  20.   }
  21.   // 如果是相同的路由就不跳转
  22.   if (
  23.     isSameRoute(route, current) &&
  24.     route.matched.length === current.matched.length
  25.   ) {
  26.     this.ensureURL()
  27.     return abort()
  28.   }
  29.   // 通过对比路由解析出可复用的组件，需要渲染的组件，失活的组件
  30.   const { updated, deactivated, activated } = resolveQueue(
  31.     this.current.matched,
  32.     route.matched
  33.   )
  35.   function resolveQueue(
  36.       current: Array<RouteRecord>,
  37.       next: Array<RouteRecord>
  38.     ): {
  39.       updated: Array<RouteRecord>,
  40.       activated: Array<RouteRecord>,
  41.       deactivated: Array<RouteRecord>
  42.     } {
  43.       let i
  44.       const max = Math.max(current.length, next.length)
  45.       for (i = 0; i < max; i++) {
  46.         // 当前路由路径和跳转路由路径不同时跳出遍历
  47.         if (current[i] !== next[i]) {
  48.           break
  49.         }
  50.       }
  51.       return {
  52.         // 可复用的组件对应路由
  53.         updated: next.slice(0, i),
  54.         // 需要渲染的组件对应路由
  55.         activated: next.slice(i),
  56.         // 失活的组件对应路由
  57.         deactivated: current.slice(i)
  58.       }
  59.   }
  60.   // 导航守卫数组
  61.   const queue: Array<?NavigationGuard> = [].concat(
  62.     // 失活的组件钩子
  63.     extractLeaveGuards(deactivated),
  64.     // 全局 beforeEach 钩子
  65.     this.router.beforeHooks,
  66.     // 在当前路由改变，但是该组件被复用时调用
  67.     extractUpdateHooks(updated),
  68.     // 需要渲染组件 enter 守卫钩子
  69.     activated.map(m => m.beforeEnter),
  70.     // 解析异步路由组件
  71.     resolveAsyncComponents(activated)
  72.   )
  73.   // 保存路由
  74.   this.pending = route
  75.   // 迭代器，用于执行 queue 中的导航守卫钩子
  76.   const iterator = (hook: NavigationGuard, next) => {
  77.   // 路由不相等就不跳转路由
  78.     if (this.pending !== route) {
  79.       return abort()
  80.     }
  81.     try {
  82.     // 执行钩子
  83.       hook(route, current, (to: any) => {
  84.         // 只有执行了钩子函数中的 next，才会继续执行下一个钩子函数
  85.         // 否则会暂停跳转
  86.         // 以下逻辑是在判断 next() 中的传参
  87.         if (to === false || isError(to)) {
  88.           // next(false) 
  89.           this.ensureURL(true)
  90.           abort(to)
  91.         } else if (
  92.           typeof to === 'string' ||
  93.           (typeof to === 'object' &&
  94.             (typeof to.path === 'string' || typeof to.name === 'string'))
  95.         ) {
  96.         // next('/') 或者 next({ path: '/' }) -> 重定向
  97.           abort()
  98.           if (typeof to === 'object' && to.replace) {
  99.             this.replace(to)
  100.           } else {
  101.             this.push(to)
  102.           }
  103.         } else {
  104.         // 这里执行 next
  105.         // 也就是执行下面函数 runQueue 中的 step(index + 1)
  106.           next(to)
  107.         }
  108.       })
  109.     } catch (e) {
  110.       abort(e)
  111.     }
  112.   }
  113.   // 经典的同步执行异步函数
  114.   runQueue(queue, iterator, () => {
  115.     const postEnterCbs = []
  116.     const isValid = () => this.current === route
  117.     // 当所有异步组件加载完成后，会执行这里的回调，也就是 runQueue 中的 cb()
  118.     // 接下来执行 需要渲染组件的导航守卫钩子
  119.     const enterGuards = extractEnterGuards(activated, postEnterCbs, isValid)
  120.     const queue = enterGuards.concat(this.router.resolveHooks)
  121.     runQueue(queue, iterator, () => {
  122.     // 跳转完成
  123.       if (this.pending !== route) {
  124.         return abort()
  125.       }
  126.       this.pending = null
  127.       onComplete(route)
  128.       if (this.router.app) {
  129.         this.router.app.$nextTick(() => {
  130.           postEnterCbs.forEach(cb => {
  131.             cb()
  132.           })
  133.         })
  134.       }
  135.     })
  136.   })
  137. }
  138. export function runQueue (queue: Array<?NavigationGuard>, fn: Function, cb: Function) {
  139.   const step = index => {
  140.   // 队列中的函数都执行完毕，就执行回调函数
  141.     if (index >= queue.length) {
  142.       cb()
  143.     } else {
  144.       if (queue[index]) {
  145.       // 执行迭代器，用户在钩子函数中执行 next() 回调
  146.       // 回调中判断传参，没有问题就执行 next()，也就是 fn 函数中的第二个参数
  147.         fn(queue[index], () => {
  148.           step(index + 1)
  149.         })
  150.       } else {
  151.         step(index + 1)
  152.       }
  153.     }
  154.   }
  155.   // 取出队列中第一个钩子函数
  156.   step(0)
  157. }

接下来介绍导航守卫

  1. const queue: Array<?NavigationGuard> = [].concat(
  2.     // 失活的组件钩子
  3.     extractLeaveGuards(deactivated),
  4.     // 全局 beforeEach 钩子
  5.     this.router.beforeHooks,
  6.     // 在当前路由改变，但是该组件被复用时调用
  7.     extractUpdateHooks(updated),
  8.     // 需要渲染组件 enter 守卫钩子
  9.     activated.map(m => m.beforeEnter),
  10.     // 解析异步路由组件
  11.     resolveAsyncComponents(activated)
  12. )

第一步是先执行失活组件的钩子函数

  1. function extractLeaveGuards(deactivated: Array<RouteRecord>): Array<?Function> {
  2. // 传入需要执行的钩子函数名
  3.   return extractGuards(deactivated, 'beforeRouteLeave', bindGuard, true)
  4. }
  5. function extractGuards(
  6.   records: Array<RouteRecord>,
  7.   name: string,
  8.   bind: Function,
  9.   reverse?: boolean
  10. ): Array<?Function> {
  11.   const guards = flatMapComponents(records, (def, instance, match, key) => {
  12.    // 找出组件中对应的钩子函数
  13.     const guard = extractGuard(def, name)
  14.     if (guard) {
  15.     // 给每个钩子函数添加上下文对象为组件自身
  16.       return Array.isArray(guard)
  17.         ? guard.map(guard => bind(guard, instance, match, key))
  18.         : bind(guard, instance, match, key)
  19.     }
  20.   })
  21.   // 数组降维，并且判断是否需要翻转数组
  22.   // 因为某些钩子函数需要从子执行到父
  23.   return flatten(reverse ? guards.reverse() : guards)
  24. }
  25. export function flatMapComponents (
  26.   matched: Array<RouteRecord>,
  27.   fn: Function
  28. ): Array<?Function> {
  29. // 数组降维
  30.   return flatten(matched.map(m => {
  31.   // 将组件中的对象传入回调函数中，获得钩子函数数组
  32.     return Object.keys(m.components).map(key => fn(
  33.       m.components[key],
  34.       m.instances[key],
  35.       m, key
  36.     ))
  37.   }))
  38. }

第二步执行全局 beforeEach 钩子函数

  1. beforeEach(fn: Function): Function {
  2.     return registerHook(this.beforeHooks, fn)
  3. }
  4. function registerHook(list: Array<any>, fn: Function): Function {
  5.   list.push(fn)
  6.   return () => {
  7.     const i = list.indexOf(fn)
  8.     if (i > -1) list.splice(i, 1)
  9.   }
  10. }

在 VueRouter 类中有以上代码，每当给 VueRouter 实例添加 beforeEach 函数时就会将函数 push 进 beforeHooks 中。

第三步执行 beforeRouteUpdate 钩子函数，调用方式和第一步相同，只是传入的函数名不同，在该函数中可以访问到 this 对象。

第四步执行 beforeEnter 钩子函数，该函数是路由独享的钩子函数。

第五步是解析异步组件。

  1. export function resolveAsyncComponents (matched: Array<RouteRecord>): Function {
  2.   return (to, from, next) => {
  3.     let hasAsync = false
  4.     let pending = 0
  5.     let error = null
  6.     // 该函数作用之前已经介绍过了
  7.     flatMapComponents(matched, (def, _, match, key) => {
  8.     // 判断是否是异步组件
  9.       if (typeof def === 'function' && def.cid === undefined) {
  10.         hasAsync = true
  11.         pending++
  12.         // 成功回调
  13.         // once 函数确保异步组件只加载一次
  14.         const resolve = once(resolvedDef => {
  15.           if (isESModule(resolvedDef)) {
  16.             resolvedDef = resolvedDef.default
  17.           }
  18.           // 判断是否是构造函数
  19.           // 不是的话通过 Vue 来生成组件构造函数
  20.           def.resolved = typeof resolvedDef === 'function'
  21.             ? resolvedDef
  22.             : _Vue.extend(resolvedDef)
  23.         // 赋值组件
  24.         // 如果组件全部解析完毕，继续下一步
  25.           match.components[key] = resolvedDef
  26.           pending--
  27.           if (pending <= 0) {
  28.             next()
  29.           }
  30.         })
  31.         // 失败回调
  32.         const reject = once(reason => {
  33.           const msg = `Failed to resolve async component ${key}: ${reason}`
  34.           process.env.NODE_ENV !== 'production' && warn(false, msg)
  35.           if (!error) {
  36.             error = isError(reason)
  37.               ? reason
  38.               : new Error(msg)
  39.             next(error)
  40.           }
  41.         })
  42.         let res
  43.         try {
  44.         // 执行异步组件函数
  45.           res = def(resolve, reject)
  46.         } catch (e) {
  47.           reject(e)
  48.         }
  49.         if (res) {
  50.         // 下载完成执行回调
  51.           if (typeof res.then === 'function') {
  52.             res.then(resolve, reject)
  53.           } else {
  54.             const comp = res.component
  55.             if (comp && typeof comp.then === 'function') {
  56.               comp.then(resolve, reject)
  57.             }
  58.           }
  59.         }
  60.       }
  61.     })
  62.     // 不是异步组件直接下一步
  63.     if (!hasAsync) next()
  64.   }
  65. }

以上就是第一个 runQueue 中的逻辑，第五步完成后会执行第一个 runQueue 中回调函数

  1. // 该回调用于保存 `beforeRouteEnter` 钩子中的回调函数
  2. const postEnterCbs = []
  3. const isValid = () => this.current === route
  4. // beforeRouteEnter 导航守卫钩子
  5. const enterGuards = extractEnterGuards(activated, postEnterCbs, isValid)
  6. // beforeResolve 导航守卫钩子
  7. const queue = enterGuards.concat(this.router.resolveHooks)
  8. runQueue(queue, iterator, () => {
  9.   if (this.pending !== route) {
  10.     return abort()
  11.   }
  12.   this.pending = null
  13.   // 这里会执行 afterEach 导航守卫钩子
  14.   onComplete(route)
  15.   if (this.router.app) {
  16.     this.router.app.$nextTick(() => {
  17.       postEnterCbs.forEach(cb => {
  18.         cb()
  19.       })
  20.     })
  21.   }
  22. })

第六步是执行 beforeRouteEnter 导航守卫钩子，beforeRouteEnter 钩子不能访问 this 对象，因为钩子在导航确认前被调用，需要渲染的组件还没被创建。但是该钩子函数是唯一一个支持在回调中获取 this 对象的函数，回调会在路由确认执行。

  1. beforeRouteEnter (to, from, next) {
  2.   next(vm => {
  3.     // 通过 `vm` 访问组件实例
  4.   })
  5. }

下面来看看是如何支持在回调中拿到 this 对象的

  1. function extractEnterGuards(
  2.   activated: Array<RouteRecord>,
  3.   cbs: Array<Function>,
  4.   isValid: () => boolean
  5. ): Array<?Function> {
  6. // 这里和之前调用导航守卫基本一致
  7.   return extractGuards(
  8.     activated,
  9.     'beforeRouteEnter',
  10.     (guard, _, match, key) => {
  11.       return bindEnterGuard(guard, match, key, cbs, isValid)
  12.     }
  13.   )
  14. }
  15. function bindEnterGuard(
  16.   guard: NavigationGuard,
  17.   match: RouteRecord,
  18.   key: string,
  19.   cbs: Array<Function>,
  20.   isValid: () => boolean
  21. ): NavigationGuard {
  22.   return function routeEnterGuard(to, from, next) {
  23.     return guard(to, from, cb => {
  24.     // 判断 cb 是否是函数
  25.     // 是的话就 push 进 postEnterCbs
  26.       next(cb)
  27.       if (typeof cb === 'function') {
  28.         cbs.push(() => {
  29.           // 循环直到拿到组件实例
  30.           poll(cb, match.instances, key, isValid)
  31.         })
  32.       }
  33.     })
  34.   }
  35. }
  36. // 该函数是为了解决 issus #750
  37. // 当 router-view 外面包裹了 mode 为 out-in 的 transition 组件 
  38. // 会在组件初次导航到时获得不到组件实例对象
  39. function poll(
  40.   cb: any, // somehow flow cannot infer this is a function
  41.   instances: Object,
  42.   key: string,
  43.   isValid: () => boolean
  44. ) {
  45.   if (
  46.     instances[key] &&
  47.     !instances[key]._isBeingDestroyed // do not reuse being destroyed instance
  48.   ) {
  49.     cb(instances[key])
  50.   } else if (isValid()) {
  51.   // setTimeout 16ms 作用和 nextTick 基本相同
  52.     setTimeout(() => {
  53.       poll(cb, instances, key, isValid)
  54.     }, 16)
  55.   }
  56. }

第七步是执行 beforeResolve 导航守卫钩子，如果注册了全局 beforeResolve 钩子就会在这里执行。

第八步就是导航确认，调用 afterEach 导航守卫钩子了。

以上都执行完成后，会触发组件的渲染

  1. history.listen(route => {
  2.       this.apps.forEach(app => {
  3.         app._route = route
  4.       })
  5. })

以上回调会在 updateRoute 中调用

  1. updateRoute(route: Route) {
  2.     const prev = this.current
  3.     this.current = route
  4.     this.cb && this.cb(route)
  5.     this.router.afterHooks.forEach(hook => {
  6.       hook && hook(route, prev)
  7.     })
  8. }

至此，路由跳转已经全部分析完毕。核心就是判断需要跳转的路由是否存在于记录中，然后执行各种导航守卫函数，最后完成 URL 的改变和组件的渲染。