这篇文章主要目的是用来梳理一下 Vue-router 的整个实现流程

首先，我们来看一下 Vue-router 源码的目录结构

  1. |——vue-router
  2.   |——build                  // 构建脚本
  3.   |——dist                   // 输出目录
  4.   |——docs                   // 文档
  5.   |——examples               // 示例
  6.   |——flow                   // 类型声明
  7.   |——src                    // 项目源码
  8.     |——components           // 组件(view/link)
  9.     |——history              // Router 处理
  10.     |——util                 // 工具库
  11.     |——index.js             // Router 入口
  12.     |——install.js           // Router 安装
  13.     |——create-matcher.js    // Route 匹配
  14.     |——create-route-map.js  // Route 映射

当然，我们主要关注的还是 src 目录下的文件。

router 注册

在我们开始使用 Vue-router 之前，要在主函数 main.js 里调用，也就是Vue.use(VueRouter)，声明这个的目的就是利用了 Vue.js 的插件机制来安装 vue-router。

当 Vue 通过 use() 来调用插件时，会调用插件的 install 方法，若插件没有 install 方法，则将插件本身作为函数来调用。

通过目录我们可以看出，install 方法是存在的，那我们首先就来看看这个文件。

  1. // src/install.js
  3. // 引入 router-view 和 router-link 组件
  4. import View from './components/view'
  5. import Link from './components/link'
  7. // export 一个私有 Vue 引用
  8. export let _Vue
  10. export function install (Vue) {
  11.   // 判断是否重复安装插件
  12.   if (install.installed && _Vue === Vue) return
  13.   install.installed = true
  14.   // 将 Vue 实例赋值给全局变量
  15.   _Vue = Vue
  17.   const isDef = v => v !== undefined
  19.   const registerInstance = (vm, callVal) => {
  20.     // 至少存在一个 VueComponent 时, _parentVnode 属性才存在
  21.     let i = vm.$options._parentVnode
  22.     if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
  23.       i(vm, callVal)
  24.     }
  25.   }
  27.   // 混入 beforeCreate 钩子函数，在调用该函数时，初始化路由
  28.   Vue.mixin({
  29.     beforeCreate () {
  30.       // 判断组件是否有 router 对象，该对象只在根组件上有
  31.       if (isDef(this.$options.router)) {
  32.         // 将 router 的根组件指向 Vue 实例
  33.         this._routerRoot = this
  34.         this._router = this.$options.router
  35.         // 初始化 router
  36.         this._router.init(this)
  37.         // 为 _route 属性实现双向绑定，触发组件渲染
  38.         Vue.util.defineReactive(this, '_route', this._router.history.current)
  39.       } else {
  40.         // 用于 router-view 层级判断
  41.         this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
  42.       }
  43.       registerInstance(this, this)
  44.     },
  45.     destroyed () {
  46.       registerInstance(this)
  47.     }
  48.   })
  49.   // 定义 Vue 原型方法 $router 和 $route 的 getter
  50.   Object.defineProperty(Vue.prototype, '$router', {
  51.     get () { return this._routerRoot._router }
  52.   })
  54.   Object.defineProperty(Vue.prototype, '$route', {
  55.     get () { return this._routerRoot._route }
  56.   })
  57.   // 注册 router-view 和 router-link 组件
  58.   Vue.component('RouterView', View)
  59.   Vue.component('RouterLink', Link)
  61.   const strats = Vue.config.optionMergeStrategies
  62.   // use the same hook merging strategy for route hooks
  63.   strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created
  64. }

VueRouter 实例化

在安装过后，就要对 VueRouter 进行实例化操作。

  1. // src/index.js
  3. ...
  4. // 实例化时，主要做了两件事： 创建 matcher 对象； 创建 history 实例
  5. export default class VueRouter {
  6.   static install: () => void;
  7.   static version: string;
  9.   app: any;
  10.   apps: Array<any>;
  11.   ready: boolean;
  12.   readyCbs: Array<Function>;
  13.   options: RouterOptions;
  14.   mode: string;
  15.   history: HashHistory | HTML5History | AbstractHistory;
  16.   matcher: Matcher;
  17.   fallback: boolean;
  18.   beforeHooks: Array<?NavigationGuard>;
  19.   resolveHooks: Array<?NavigationGuard>;
  20.   afterHooks: Array<?AfterNavigationHook>;
  22.   constructor (options: RouterOptions = {}) {
  23.     // 配置路由对象
  24.     this.app = null
  25.     this.apps = []
  26.     this.options = options
  27.     this.beforeHooks = []
  28.     this.resolveHooks = []
  29.     this.afterHooks = []
  30.     this.matcher = createMatcher(options.routes || [], this)
  32.     // 对 mode 做检测 options.fallback 是新增属性，表示是否对不支持 HTML5 history 的浏览器做降级处理
  33.     let mode = options.mode || 'hash'
  34.     this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false
  35.     if (this.fallback) {
  36.       // 兼容不支持 history
  37.       mode = 'hash'
  38.     }
  39.     if (!inBrowser) {
  40.       // 非浏览器模式
  41.       mode = 'abstract'
  42.     }
  43.     this.mode = mode
  44.     // 根据 mode 创建 history 实例
  45.     switch (mode) {
  46.       case 'history':
  47.         this.history = new HTML5History(this, options.base)
  48.         break
  49.       case 'hash':
  50.         this.history = new HashHistory(this, options.base, this.fallback)
  51.         break
  52.       case 'abstract':
  53.         this.history = new AbstractHistory(this, options.base)
  54.         break
  55.       default:
  56.         if (process.env.NODE_ENV !== 'production') {
  57.           assert(false, `invalid mode: ${mode}`)
  58.         }
  59.     }
  60.   }
  61.   // 返回匹配的 route
  62.   match (
  63.     raw: RawLocation,
  64.     current?: Route,
  65.     redirectedFrom?: Location
  66.   ): Route {
  67.     return this.matcher.match(raw, current, redirectedFrom)
  68.   }
  69.   ...
  70. }

创建路由匹配对象

  1. // src/create-matcher.js
  3. // 定义 Matcher 类型
  4. export type Matcher = {
  5.   match: (raw: RawLocation, current?: Route, redirectedFrom?: Location) => Route;
  6.   addRoutes: (routes: Array<RouteConfig>) => void;
  7. };
  9. export function createMatcher (
  10.   routes: Array<RouteConfig>,
  11.   router: VueRouter
  12. ): Matcher {
  13.   // 根据 routes 创建路由映射表
  14.   const { pathList, pathMap, nameMap } = createRouteMap(routes)
  15.   // 添加路由函数
  16.   function addRoutes (routes) {
  17.     createRouteMap(routes, pathList, pathMap, nameMap)
  18.   }
  19.   // 路由匹配
  20.   function match (
  21.     raw: RawLocation,
  22.     currentRoute?: Route,
  23.     redirectedFrom?: Location
  24.   ): Route {
  25.     const location = normalizeLocation(raw, currentRoute, false, router)
  26.     const { name } = location
  27.     // 如果 name 存在的话，就去 name map 中去找到这条路由记录
  28.     if (name) {
  29.       const record = nameMap[name]
  30.       if (process.env.NODE_ENV !== 'production') {
  31.         warn(record, `Route with name '${name}' does not exist`)
  32.       }
  33.       // 如果没有这条路由记录就去创建一条路由对象
  34.       if (!record) return _createRoute(null, location)
  35.       const paramNames = record.regex.keys
  36.         .filter(key => !key.optional)
  37.         .map(key => key.name)
  39.       if (typeof location.params !== 'object') {
  40.         location.params = {}
  41.       }
  43.       if (currentRoute && typeof currentRoute.params === 'object') {
  44.         for (const key in currentRoute.params) {
  45.           if (!(key in location.params) && paramNames.indexOf(key) > -1) {
  46.             location.params[key] = currentRoute.params[key]
  47.           }
  48.         }
  49.       }
  51.       if (record) {
  52.         location.path = fillParams(record.path, location.params, `named route "${name}"`)
  53.         return _createRoute(record, location, redirectedFrom)
  54.       }
  55.     } else if (location.path) {
  56.       location.params = {}
  57.       for (let i = 0; i < pathList.length; i++) {
  58.         const path = pathList[i]
  59.         const record = pathMap[path]
  60.         if (matchRoute(record.regex, location.path, location.params)) {
  61.           return _createRoute(record, location, redirectedFrom)
  62.         }
  63.       }
  64.     }
  65.     // no match
  66.     return _createRoute(null, location)
  67.   }
  68.   ...
  69.   // 根据不同的条件去创建路由对象；
  70.   function _createRoute (
  71.     record: ?RouteRecord,
  72.     location: Location,
  73.     redirectedFrom?: Location
  74.   ): Route {
  75.     if (record && record.redirect) {
  76.       return redirect(record, redirectedFrom || location)
  77.     }
  78.     if (record && record.matchAs) {
  79.       return alias(record, location, record.matchAs)
  80.     }
  81.     return createRoute(record, location, redirectedFrom, router)
  82.   }
  83.   // 返回 matcher 对象
  84.   return {
  85.     match,
  86.     addRoutes
  87.   }
  88. }

根据源码我们可以看出，createMatcher 就是根据传入的 routes 生成一个 map 表，并且返回 match 函数以及一个可以增加路由配置项 addRoutes 函数。

我们继续看 route-map 的生成

  1. // src/create-route-map.js
  2. export function createRouteMap (
  3.   routes: Array<RouteConfig>,
  4.   oldPathList?: Array<string>,
  5.   oldPathMap?: Dictionary<RouteRecord>,
  6.   oldNameMap?: Dictionary<RouteRecord>
  7. ): {
  8.   pathList: Array<string>;
  9.   pathMap: Dictionary<RouteRecord>;
  10.   nameMap: Dictionary<RouteRecord>;
  11. } {
  12.   // 创建映射列表
  13.   // the path list is used to control path matching priority
  14.   const pathList: Array<string> = oldPathList || []
  15.   // $flow-disable-line
  16.   const pathMap: Dictionary<RouteRecord> = oldPathMap || Object.create(null)
  17.   // $flow-disable-line
  18.   const nameMap: Dictionary<RouteRecord> = oldNameMap || Object.create(null)
  19.   // 遍历路由配置，为每个配置添加路由记录
  20.   routes.forEach(route => {
  21.     addRouteRecord(pathList, pathMap, nameMap, route)
  22.   })
  24.   // ensure wildcard routes are always at the end 通配符一直保持在最后
  25.   for (let i = 0, l = pathList.length; i < l; i++) {
  26.     if (pathList[i] === '*') {
  27.       pathList.push(pathList.splice(i, 1)[0])
  28.       l--
  29.       i--
  30.     }
  31.   }
  33.   return {
  34.     pathList,
  35.     pathMap,
  36.     nameMap
  37.   }
  38. }
  39. // 添加路由记录
  40. function addRouteRecord (
  41.   pathList: Array<string>,
  42.   pathMap: Dictionary<RouteRecord>,
  43.   nameMap: Dictionary<RouteRecord>,
  44.   route: RouteConfig,
  45.   parent?: RouteRecord,
  46.   matchAs?: string
  47. ) {
  48.   const { path, name } = route
  49.   if (process.env.NODE_ENV !== 'production') {
  50.     assert(path != null, `"path" is required in a route configuration.`)
  51.     assert(
  52.       typeof route.component !== 'string',
  53.       `route config "component" for path: ${String(path || name)} cannot be a ` +
  54.       `string id. Use an actual component instead.`
  55.     )
  56.   }
  58.   const pathToRegexpOptions: PathToRegexpOptions = route.pathToRegexpOptions || {}
  59.   // 序列化 path 用 / 替换
  60.   const normalizedPath = normalizePath(
  61.     path,
  62.     parent,
  63.     pathToRegexpOptions.strict
  64.   )
  65.   // 对路径进行正则匹配是否区分大小写
  66.   if (typeof route.caseSensitive === 'boolean') {
  67.     pathToRegexpOptions.sensitive = route.caseSensitive
  68.   }
  69.   // 创建一个路由记录对象
  70.   const record: RouteRecord = {
  71.     path: normalizedPath, // 路径
  72.     regex: compileRouteRegex(normalizedPath, pathToRegexpOptions), //转化为匹配数组
  73.     components: route.components || { default: route.component }, // 关联数组
  74.     instances: {}, // 实例
  75.     name, // 名称
  76.     parent, // 父级 router
  77.     matchAs,
  78.     redirect: route.redirect, // 跳转
  79.     beforeEnter: route.beforeEnter, // deforeEnter 钩子函数
  80.     meta: route.meta || {}, // 附加参数
  81.     props: route.props == null // prop 属性
  82.       ? {}
  83.       : route.components
  84.         ? route.props
  85.         : { default: route.props }
  86.   }
  87.   // 递归子路由
  88.   if (route.children) {
  89.     // Warn if route is named, does not redirect and has a default child route.
  90.     // If users navigate to this route by name, the default child will
  91.     // not be rendered (GH Issue #629)
  92.     if (process.env.NODE_ENV !== 'production') {
  93.       if (route.name && !route.redirect && route.children.some(child => /^\/?$/.test(child.path))) {
  94.         warn(
  95.           false,
  96.           `Named Route '${route.name}' has a default child route. ` +
  97.           `When navigating to this named route (:to="{name: '${route.name}'"), ` +
  98.           `the default child route will not be rendered. Remove the name from ` +
  99.           `this route and use the name of the default child route for named ` +
  100.           `links instead.`
  101.         )
  102.       }
  103.     }
  104.     route.children.forEach(child => {
  105.       const childMatchAs = matchAs
  106.         ? cleanPath(`${matchAs}/${child.path}`)
  107.         : undefined
  108.       addRouteRecord(pathList, pathMap, nameMap, child, record, childMatchAs)
  109.     })
  110.   }
  111.   // 别名
  112.   if (route.alias !== undefined) {
  113.     const aliases = Array.isArray(route.alias)
  114.       ? route.alias
  115.       : [route.alias]
  117.     aliases.forEach(alias => {
  118.       const aliasRoute = {
  119.         path: alias,
  120.         children: route.children
  121.       }
  122.       addRouteRecord(
  123.         pathList,
  124.         pathMap,
  125.         nameMap,
  126.         aliasRoute,
  127.         parent,
  128.         record.path || '/' // matchAs
  129.       )
  130.     })
  131.   }
  132.   // 按路径存储
  133.   if (!pathMap[record.path]) {
  134.     pathList.push(record.path)
  135.     pathMap[record.path] = record
  136.   }
  137.   // 处理命名路由，按照名字存储
  138.   if (name) {
  139.     if (!nameMap[name]) {
  140.       nameMap[name] = record
  141.     } else if (process.env.NODE_ENV !== 'production' && !matchAs) {
  142.       warn(
  143.         false,
  144.         `Duplicate named routes definition: ` +
  145.         `{ name: "${name}", path: "${record.path}" }`
  146.       )
  147.     }
  148.   }
  149. }

从上述代码可以看出, create-route-map.js 的主要功能是根据用户的 routes 配置的 path 、alias以及 name 来生成对应的路由记录, 方便后续匹配对应。

History 实例化

vueRouter 提供了 HTML5History、HashHistory、AbstractHistory 三种方式，根据不同的 mode 和实际环境去实例化 History

  1. // src/history/base.js
  3. export class History {
  4.   router: Router; // router 对象
  5.   base: string; // 基准路径
  6.   current: Route; // 当前路径
  7.   pending: ?Route;
  8.   cb: (r: Route) => void;
  9.   ready: boolean;
  10.   readyCbs: Array<Function>;
  11.   readyErrorCbs: Array<Function>;
  12.   errorCbs: Array<Function>;
  14.   // 子类
  15.   // implemented by sub-classes
  16.   +go: (n: number) => void;
  17.   +push: (loc: RawLocation) => void;
  18.   +replace: (loc: RawLocation) => void;
  19.   +ensureURL: (push?: boolean) => void;
  20.   +getCurrentLocation: () => string;
  22.   constructor (router: Router, base: ?string) {
  23.     this.router = router
  24.     this.base = normalizeBase(base) // 返回基准路径
  25.     // start with a route object that stands for "nowhere"
  26.     this.current = START // 当前 route
  27.     this.pending = null
  28.     this.ready = false
  29.     this.readyCbs = []
  30.     this.readyErrorCbs = []
  31.     this.errorCbs = []
  32.   }
  34.   ...
  35.   // 路由化操作
  36.   transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  37.     const route = this.router.match(location, this.current) // 找到匹配路由
  38.     this.confirmTransition(route, () => { // 确认是否转化
  39.       this.updateRoute(route) // 更新 route
  40.       onComplete && onComplete(route)
  41.       this.ensureURL()
  43.       // fire ready cbs once
  44.       if (!this.ready) {
  45.         this.ready = true
  46.         this.readyCbs.forEach(cb => { cb(route) })
  47.       }
  48.     }, err => {
  49.       if (onAbort) {
  50.         onAbort(err)
  51.       }
  52.       if (err && !this.ready) {
  53.         this.ready = true
  54.         this.readyErrorCbs.forEach(cb => { cb(err) })
  55.       }
  56.     })
  57.   }
  58.   // 确认是否转化路由
  59.   confirmTransition (route: Route, onComplete: Function, onAbort?: Function) {
  60.     const current = this.current
  61.     const abort = err => {
  62.       if (isError(err)) {
  63.         if (this.errorCbs.length) {
  64.           this.errorCbs.forEach(cb => { cb(err) })
  65.         } else {
  66.           warn(false, 'uncaught error during route navigation:')
  67.           console.error(err)
  68.         }
  69.       }
  70.       onAbort && onAbort(err)
  71.     }
  72.     // 判断如果前后是一个路由，则不发生变化
  73.     if (
  74.       isSameRoute(route, current) &&
  75.       // in the case the route map has been dynamically appended to
  76.       route.matched.length === current.matched.length
  77.     ) {
  78.       this.ensureURL()
  79.       return abort()
  80.     }
  82.   ...   
  84.   updateRoute (route: Route) {
  85.     const prev = this.current
  86.     this.current = route
  87.     this.cb && this.cb(route)
  88.     this.router.afterHooks.forEach(hook => {
  89.       hook && hook(route, prev)
  90.     })
  91.   }
  92. }

在基础的挂载和各种实例都弄完之后，我们就可以从 init 开始入手了

init()

  1. // src/index.js
  2. init (app: any /* Vue component instance */) {
  3.     process.env.NODE_ENV !== 'production' && assert(
  4.       install.installed,
  5.       `not installed. Make sure to call \`Vue.use(VueRouter)\` ` +
  6.       `before creating root instance.`
  7.     )
  8.     // 从 install 知道 这个 app 是我们实例化的 Vue 实例
  9.     this.apps.push(app)
  11.     // main app already initialized.
  12.     if (this.app) {
  13.       return
  14.     }
  15.     // 将 vueRouter 内部的 app 指向 Vue 实例
  16.     this.app = app
  18.     const history = this.history
  19.     // 对 HTML5History 和 HashHistory 进行特殊处理
  20.     if (history instanceof HTML5History) {
  21.       history.transitionTo(history.getCurrentLocation())
  22.     } else if (history instanceof HashHistory) {
  23.       // 监听路由变化
  24.       const setupHashListener = () => {
  25.         history.setupListeners()
  26.       }
  27.       history.transitionTo(
  28.         history.getCurrentLocation(),
  29.         setupHashListener,
  30.         setupHashListener
  31.       )
  32.     }
  33.     // 设置路由改变的时候监听
  34.     history.listen(route => {
  35.       this.apps.forEach((app) => {
  36.         app._route = route
  37.       })
  38.     })
  39.   }

我们这里看出，对于 HTML5History 和 HashHistory 进行了不同的处理，因为此时需要根据浏览器地址栏里的 path 或者 hash 来匹配对应的路由。尽管有些不同，但是都调用了 transitionTo 方法，让我们来看一下这个方法。

  1. // src/history/base.js
  2. transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  3.     // location 为当前路由
  4.     // 这里调用了 match 方法来获取匹配的路由对象，this.current 指我们保存的当前状态的对象
  5.     const route = this.router.match(location, this.current)
  6.     this.confirmTransition(route, () => {
  7.       // 更新当前对象
  8.       this.updateRoute(route)
  9.       onComplete && onComplete(route)
  10.       // 调用子类方法，用来更新 URL
  11.       this.ensureURL()
  13.       // fire ready cbs once
  14.       // 调用成功后的ready的回调函数
  15.       if (!this.ready) {
  16.         this.ready = true
  17.         this.readyCbs.forEach(cb => { cb(route) })
  18.       }
  19.     }, err => {
  20.       if (onAbort) {
  21.         onAbort(err)
  22.       }
  23.       // 调用失败的err回调函数；
  24.       if (err && !this.ready) {
  25.         this.ready = true
  26.         this.readyErrorCbs.forEach(cb => { cb(err) })
  27.       }
  28.     })
  29.   }
  30.   // 确认跳转
  31.   confirmTransition (route: Route, onComplete: Function, onAbort?: Function) {
  32.     const current = this.current
  33.     const abort = err => {
  34.       if (isError(err)) {
  35.         if (this.errorCbs.length) {
  36.           this.errorCbs.forEach(cb => { cb(err) })
  37.         } else {
  38.           warn(false, 'uncaught error during route navigation:')
  39.           console.error(err)
  40.         }
  41.       }
  42.       onAbort && onAbort(err)
  43.     }
  44.     if (
  45.       // 如果是同一个路由就不跳转
  46.       isSameRoute(route, current) &&
  47.       // in the case the route map has been dynamically appended to
  48.       route.matched.length === current.matched.length
  49.     ) {
  50.       // 调用子类的方法更新url
  51.       this.ensureURL()
  52.       return abort()
  53.     }
  55.     const {
  56.       updated,
  57.       deactivated,
  58.       activated
  59.     } = resolveQueue(this.current.matched, route.matched)
  61.     const queue: Array<?NavigationGuard> = [].concat(
  62.       // in-component leave guards
  63.       extractLeaveGuards(deactivated),
  64.       // global before hooks
  65.       this.router.beforeHooks,
  66.       // in-component update hooks
  67.       extractUpdateHooks(updated),
  68.       // in-config enter guards
  69.       activated.map(m => m.beforeEnter),
  70.       // async components
  71.       resolveAsyncComponents(activated)
  72.     )
  74.     this.pending = route
  75.     // 每一个队列执行的 iterator 函数
  76.     const iterator = (hook: NavigationGuard, next) => {
  77.       if (this.pending !== route) {
  78.         return abort()
  79.       }
  80.       try {
  81.         hook(route, current, (to: any) => {
  82.           if (to === false || isError(to)) {
  83.             // next(false) -> abort navigation, ensure current URL
  84.             this.ensureURL(true)
  85.             abort(to)
  86.           } else if (
  87.             typeof to === 'string' ||
  88.             (typeof to === 'object' && (
  89.               typeof to.path === 'string' ||
  90.               typeof to.name === 'string'
  91.             ))
  92.           ) {
  93.             // next('/') or next({ path: '/' }) -> redirect
  94.             abort()
  95.             if (typeof to === 'object' && to.replace) {
  96.               this.replace(to)
  97.             } else {
  98.               this.push(to)
  99.             }
  100.           } else {
  101.             // confirm transition and pass on the value
  102.             next(to)
  103.           }
  104.         })
  105.       } catch (e) {
  106.         abort(e)
  107.       }
  108.     }
  109.     // 执行各种钩子队列
  110.     runQueue(queue, iterator, () => {
  111.       const postEnterCbs = []
  112.       const isValid = () => this.current === route
  113.       // wait until async components are resolved before
  114.       // extracting in-component enter guards
  115.       const enterGuards = extractEnterGuards(activated, postEnterCbs, isValid)
  116.       const queue = enterGuards.concat(this.router.resolveHooks)
  117.       runQueue(queue, iterator, () => {
  118.         if (this.pending !== route) {
  119.           return abort()
  120.         }
  121.         this.pending = null
  122.         onComplete(route)
  123.         if (this.router.app) {
  124.           this.router.app.$nextTick(() => {
  125.             postEnterCbs.forEach(cb => { cb() })
  126.           })
  127.         }
  128.       })
  129.     })
  130.   }

其实这里说白了就是各种钩子函数来回秀操作，要注意的就是每个 router 对象都会有一个 matchd 属性，这个属性包含了一个路由记录。

在这里大多数博客都会说一下 src/index.js 的一个小尾巴，我们也不例外

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

这里更新的 _route 的值，这样就可以去通过 render 进行组件重新渲染。

Vue-router 的大致流程就是这些，还有一些 utils 和几种不同的 history 的具体实现还没有讲到，在这里就不一一详解了，还是推荐结合着源码去理解 Vue-router 真正在做什么，这样理解的也能更深入。