• VueRouter 对象
    • 总结

    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