VueRouter 对象

VueRouter 的实现是一个类，我们先对它做一个简单地分析，它的定义在 src/index.js 中：

  1. export default class VueRouter {
  2.   static install: () => void;
  3.   static version: string;
  5.   app: any;
  6.   apps: Array<any>;
  7.   ready: boolean;
  8.   readyCbs: Array<Function>;
  9.   options: RouterOptions;
  10.   mode: string;
  11.   history: HashHistory | HTML5History | AbstractHistory;
  12.   matcher: Matcher;
  13.   fallback: boolean;
  14.   beforeHooks: Array<?NavigationGuard>;
  15.   resolveHooks: Array<?NavigationGuard>;
  16.   afterHooks: Array<?AfterNavigationHook>;
  18.   constructor (options: RouterOptions = {}) {
  19.     this.app = null
  20.     this.apps = []
  21.     this.options = options
  22.     this.beforeHooks = []
  23.     this.resolveHooks = []
  24.     this.afterHooks = []
  25.     this.matcher = createMatcher(options.routes || [], this)
  27.     let mode = options.mode || 'hash'
  28.     this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false
  29.     if (this.fallback) {
  30.       mode = 'hash'
  31.     }
  32.     if (!inBrowser) {
  33.       mode = 'abstract'
  34.     }
  35.     this.mode = mode
  37.     switch (mode) {
  38.       case 'history':
  39.         this.history = new HTML5History(this, options.base)
  40.         break
  41.       case 'hash':
  42.         this.history = new HashHistory(this, options.base, this.fallback)
  43.         break
  44.       case 'abstract':
  45.         this.history = new AbstractHistory(this, options.base)
  46.         break
  47.       default:
  48.         if (process.env.NODE_ENV !== 'production') {
  49.           assert(false, `invalid mode: ${mode}`)
  50.         }
  51.     }
  52.   }
  54.   match (
  55.     raw: RawLocation,
  56.     current?: Route,
  57.     redirectedFrom?: Location
  58.   ): Route {
  59.     return this.matcher.match(raw, current, redirectedFrom)
  60.   }
  62.   get currentRoute (): ?Route {
  63.     return this.history && this.history.current
  64.   }
  66.   init (app: any) {
  67.     process.env.NODE_ENV !== 'production' && assert(
  68.       install.installed,
  69.       `not installed. Make sure to call \`Vue.use(VueRouter)\` ` +
  70.       `before creating root instance.`
  71.     )
  73.     this.apps.push(app)
  75.     if (this.app) {
  76.       return
  77.     }
  79.     this.app = app
  81.     const history = this.history
  83.     if (history instanceof HTML5History) {
  84.       history.transitionTo(history.getCurrentLocation())
  85.     } else if (history instanceof HashHistory) {
  86.       const setupHashListener = () => {
  87.         history.setupListeners()
  88.       }
  89.       history.transitionTo(
  90.         history.getCurrentLocation(),
  91.         setupHashListener,
  92.         setupHashListener
  93.       )
  94.     }
  96.     history.listen(route => {
  97.       this.apps.forEach((app) => {
  98.         app._route = route
  99.       })
  100.     })
  101.   }
  103.   beforeEach (fn: Function): Function {
  104.     return registerHook(this.beforeHooks, fn)
  105.   }
  107.   beforeResolve (fn: Function): Function {
  108.     return registerHook(this.resolveHooks, fn)
  109.   }
  111.   afterEach (fn: Function): Function {
  112.     return registerHook(this.afterHooks, fn)
  113.   }
  115.   onReady (cb: Function, errorCb?: Function) {
  116.     this.history.onReady(cb, errorCb)
  117.   }
  119.   onError (errorCb: Function) {
  120.     this.history.onError(errorCb)
  121.   }
  123.   push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  124.     this.history.push(location, onComplete, onAbort)
  125.   }
  127.   replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  128.     this.history.replace(location, onComplete, onAbort)
  129.   }
  131.   go (n: number) {
  132.     this.history.go(n)
  133.   }
  135.   back () {
  136.     this.go(-1)
  137.   }
  139.   forward () {
  140.     this.go(1)
  141.   }
  143.   getMatchedComponents (to?: RawLocation | Route): Array<any> {
  144.     const route: any = to
  145.       ? to.matched
  146.         ? to
  147.         : this.resolve(to).route
  148.       : this.currentRoute
  149.     if (!route) {
  150.       return []
  151.     }
  152.     return [].concat.apply([], route.matched.map(m => {
  153.       return Object.keys(m.components).map(key => {
  154.         return m.components[key]
  155.       })
  156.     }))
  157.   }
  159.   resolve (
  160.     to: RawLocation,
  161.     current?: Route,
  162.     append?: boolean
  163.   ): {
  164.     location: Location,
  165.     route: Route,
  166.     href: string,
  167.     normalizedTo: Location,
  168.     resolved: Route
  169.   } {
  170.     const location = normalizeLocation(
  171.       to,
  172.       current || this.history.current,
  173.       append,
  174.       this
  175.     )
  176.     const route = this.match(location, current)
  177.     const fullPath = route.redirectedFrom || route.fullPath
  178.     const base = this.history.base
  179.     const href = createHref(base, fullPath, this.mode)
  180.     return {
  181.       location,
  182.       route,
  183.       href,
  184.       normalizedTo: location,
  185.       resolved: route
  186.     }
  187.   }
  189.   addRoutes (routes: Array<RouteConfig>) {
  190.     this.matcher.addRoutes(routes)
  191.     if (this.history.current !== START) {
  192.       this.history.transitionTo(this.history.getCurrentLocation())
  193.     }
  194.   }
  195. }

VueRouter 定义了一些属性和方法，我们先从它的构造函数看，当我们执行 new VueRouter 的时候做了哪些事情。

  1. constructor (options: RouterOptions = {}) {
  2.   this.app = null
  3.   this.apps = []
  4.   this.options = options
  5.   this.beforeHooks = []
  6.   this.resolveHooks = []
  7.   this.afterHooks = []
  8.   this.matcher = createMatcher(options.routes || [], this)
  10.   let mode = options.mode || 'hash'
  11.   this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false
  12.   if (this.fallback) {
  13.     mode = 'hash'
  14.   }
  15.   if (!inBrowser) {
  16.     mode = 'abstract'
  17.   }
  18.   this.mode = mode
  20.   switch (mode) {
  21.     case 'history':
  22.       this.history = new HTML5History(this, options.base)
  23.       break
  24.     case 'hash':
  25.       this.history = new HashHistory(this, options.base, this.fallback)
  26.       break
  27.     case 'abstract':
  28.       this.history = new AbstractHistory(this, options.base)
  29.       break
  30.     default:
  31.       if (process.env.NODE_ENV !== 'production') {
  32.         assert(false, `invalid mode: ${mode}`)
  33.       }
  34.   }
  35. }

构造函数定义了一些属性，其中 this.app 表示根 Vue 实例，this.apps 保存持有 $options.router 属性的 Vue 实例，this.options 保存传入的路由配置，this.beforeHooks、this.resolveHooks、this.afterHooks 表示一些钩子函数，我们之后会介绍，this.matcher 表示路由匹配器，我们之后会介绍，this.fallback 表示在浏览器不支持 history.pushState 的情况下，根据传入的 fallback 配置参数，决定是否回退到hash模式，this.mode 表示路由创建的模式，this.history 表示路由历史的具体的实现实例，它是根据 this.mode 的不同实现不同，它有 History 基类，然后不同的 history 实现都是继承 History。

实例化 VueRouter 后会返回它的实例 router，我们在 new Vue 的时候会把 router 作为配置的属性传入，回顾一下上一节我们讲 beforeCreate 混入的时候有这么一段代码：

  1. beforeCreate() {
  2.   if (isDef(this.$options.router)) {
  3.     // ...
  4.     this._router = this.$options.router
  5.     this._router.init(this)
  6.     // ...
  7.   }
  8. }

所以组件在执行 beforeCreate 钩子函数的时候，如果传入了 router 实例，都会执行 router.init 方法：

  1. init (app: any) {
  2.   process.env.NODE_ENV !== 'production' && assert(
  3.     install.installed,
  4.     `not installed. Make sure to call \`Vue.use(VueRouter)\` ` +
  5.     `before creating root instance.`
  6.   )
  8.   this.apps.push(app)
  10.   if (this.app) {
  11.     return
  12.   }
  14.   this.app = app
  16.   const history = this.history
  18.   if (history instanceof HTML5History) {
  19.     history.transitionTo(history.getCurrentLocation())
  20.   } else if (history instanceof HashHistory) {
  21.     const setupHashListener = () => {
  22.       history.setupListeners()
  23.     }
  24.     history.transitionTo(
  25.       history.getCurrentLocation(),
  26.       setupHashListener,
  27.       setupHashListener
  28.     )
  29.   }
  31.   history.listen(route => {
  32.     this.apps.forEach((app) => {
  33.       app._route = route
  34.     })
  35.   })
  36. }

init 的逻辑很简单，它传入的参数是 Vue 实例，然后存储到 this.apps 中；只有根 Vue 实例会保存到 this.app 中，并且会拿到当前的 this.history，根据它的不同类型来执行不同逻辑，由于我们平时使用 hash 路由多一些，所以我们先看这部分逻辑，先定义了 setupHashListener 函数，接着执行了 history.transitionTo 方法，它是定义在 History 基类中，代码在 src/history/base.js：

  1. transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  2.   const route = this.router.match(location, this.current)
  3.   // ...
  4. }

我们先不着急去看 transitionTo 的具体实现，先看第一行代码，它调用了 this.router.match 函数：

  1. match (
  2.   raw: RawLocation,
  3.   current?: Route,
  4.   redirectedFrom?: Location
  5. ): Route {
  6.   return this.matcher.match(raw, current, redirectedFrom)
  7. }

实际上是调用了 this.matcher.match 方法去做匹配，所以接下来我们先来了解一下 matcher 的相关实现。

总结

通过这一节的分析，我们大致对 VueRouter 类有了大致了解，知道了它的一些属性和方法，同时了了解到在组件的初始化阶段，执行到 beforeCreate 钩子函数的时候会执行 router.init 方法，然后又会执行 history.transitionTo 方法做路由过渡，进而引出了 matcher 的概念，接下来我们先研究一下 matcher 的相关实现。

原文: https://ustbhuangyi.github.io/vue-analysis/vue-router/router.html