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

    1. export default class VueRouter {
    2.   static install: () => void
    3.   static version: string
    4.   static isNavigationFailure: Function
    5.   static NavigationFailureType: any
    6.   static START_LOCATION: Route
    8.   app: any
    9.   apps: Array<any>
    10.   ready: boolean
    11.   readyCbs: Array<Function>
    12.   options: RouterOptions
    13.   mode: string
    14.   history: HashHistory | HTML5History | AbstractHistory
    15.   matcher: Matcher
    16.   fallback: boolean
    17.   beforeHooks: Array<?NavigationGuard>
    18.   resolveHooks: Array<?NavigationGuard>
    19.   afterHooks: Array<?AfterNavigationHook>
    21.   constructor (options: RouterOptions = {}) {
    22.     if (process.env.NODE_ENV !== 'production') {
    23.       warn(this instanceof VueRouter, `Router must be called with the new operator.`)
    24.     }
    25.     this.app = null // 根实例
    26.     this.apps = [] // 保存持有$options.router属性的Vue实例
    27.     this.options = options // 保存传入的路由配置
    28.     // 钩子函数
    29.     this.beforeHooks = []
    30.     this.resolveHooks = []
    31.     this.afterHooks = []
    32.     // 路由匹配器
    33.     this.matcher = createMatcher(options.routes || [], this)
    35.     let mode = options.mode || 'hash'
    36.     // 浏览器不支持history.pushState的情况下，根据传入fallback配置参数决定是否退回到hash模式
    37.     this.fallback =
    38.       mode === 'history' && !supportsPushState && options.fallback !== false
    39.     if (this.fallback) {
    40.       mode = 'hash'
    41.     }
    42.     if (!inBrowser) {
    43.       mode = 'abstract'
    44.     }
    45.     this.mode = mode // 路由创建的模式
    47.     // this.history表示路由历史的具体的实现实例，它是根据this.mode的不同实现不同，它有history基类，然后不同的history实现都是继承History
    48.     switch (mode) {
    49.       case 'history':
    50.         this.history = new HTML5History(this, options.base)
    51.         break
    52.       case 'hash':
    53.         this.history = new HashHistory(this, options.base, this.fallback)
    54.         break
    55.       case 'abstract':
    56.         this.history = new AbstractHistory(this, options.base)
    57.         break
    58.       default:
    59.         if (process.env.NODE_ENV !== 'production') {
    60.           assert(false, `invalid mode: ${mode}`)
    61.         }
    62.     }
    63.   }
    65.   // 下一节
    66.   match (raw: RawLocation, current?: Route, redirectedFrom?: Location): Route {
    67.     return this.matcher.match(raw, current, redirectedFrom)
    68.   }
    70.   get currentRoute (): ?Route {
    71.     return this.history && this.history.current
    72.   }
    74.   // 参数是Vue实例
    75.   init (app: any /* Vue component instance */) {
    76.     process.env.NODE_ENV !== 'production' &&
    77.       assert(
    78.         install.installed,
    79.         `not installed. Make sure to call \`Vue.use(VueRouter)\` ` +
    80.           `before creating root instance.`
    81.       )
    82.         // 存储到this.apps
    83.     this.apps.push(app) // 只有根 Vue 实例会保存到 this.app 中，并且会拿到当前的 this.history，根据它的不同类型来执行不同逻辑
    85.     // set up app destroyed handler
    86.     // https://github.com/vuejs/vue-router/issues/2639
    87.     app.$once('hook:destroyed', () => {
    88.       // clean out app from this.apps array once destroyed
    89.       const index = this.apps.indexOf(app)
    90.       if (index > -1) this.apps.splice(index, 1)
    91.       // ensure we still have a main app or null if no apps
    92.       // we do not release the router so it can be reused
    93.       if (this.app === app) this.app = this.apps[0] || null
    95.       if (!this.app) this.history.teardown()
    96.     })
    98.     // main app previously initialized
    99.     // return as we don't need to set up new history listener
    100.     if (this.app) {
    101.       return
    102.     }
    104.     this.app = app
    106.     const history = this.history
    108.     if (history instanceof HTML5History || history instanceof HashHistory) {
    109.       const handleInitialScroll = routeOrError => {
    110.         const from = history.current
    111.         const expectScroll = this.options.scrollBehavior
    112.         const supportsScroll = supportsPushState && expectScroll
    114.         if (supportsScroll && 'fullPath' in routeOrError) {
    115.           handleScroll(this, routeOrError, from, false)
    116.         }
    117.       }
    118.       const setupListeners = routeOrError => {
    119.         history.setupListeners()
    120.         handleInitialScroll(routeOrError)
    121.       }
    122.       // 定义在History的基类中
    123.       history.transitionTo(
    124.         history.getCurrentLocation(),
    125.         setupListeners,
    126.         setupListeners
    127.       )
    128.     }
    130.     history.listen(route => {
    131.       this.apps.forEach(app => {
    132.         app._route = route
    133.       })
    134.     })
    135.   }
    137.   beforeEach (fn: Function): Function {
    138.     return registerHook(this.beforeHooks, fn)
    139.   }
    141.   beforeResolve (fn: Function): Function {
    142.     return registerHook(this.resolveHooks, fn)
    143.   }
    145.   afterEach (fn: Function): Function {
    146.     return registerHook(this.afterHooks, fn)
    147.   }
    149.   onReady (cb: Function, errorCb?: Function) {
    150.     this.history.onReady(cb, errorCb)
    151.   }
    153.   onError (errorCb: Function) {
    154.     this.history.onError(errorCb)
    155.   }
    157.   push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
    158.     // $flow-disable-line
    159.     if (!onComplete && !onAbort && typeof Promise !== 'undefined') {
    160.       return new Promise((resolve, reject) => {
    161.         this.history.push(location, resolve, reject)
    162.       })
    163.     } else {
    164.       this.history.push(location, onComplete, onAbort)
    165.     }
    166.   }
    168.   replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
    169.     // $flow-disable-line
    170.     if (!onComplete && !onAbort && typeof Promise !== 'undefined') {
    171.       return new Promise((resolve, reject) => {
    172.         this.history.replace(location, resolve, reject)
    173.       })
    174.     } else {
    175.       this.history.replace(location, onComplete, onAbort)
    176.     }
    177.   }
    179.   go (n: number) {
    180.     this.history.go(n)
    181.   }
    183.   back () {
    184.     this.go(-1)
    185.   }
    187.   forward () {
    188.     this.go(1)
    189.   }
    191.   getMatchedComponents (to?: RawLocation | Route): Array<any> {
    192.     const route: any = to
    193.       ? to.matched
    194.         ? to
    195.         : this.resolve(to).route
    196.       : this.currentRoute
    197.     if (!route) {
    198.       return []
    199.     }
    200.     return [].concat.apply(
    201.       [],
    202.       route.matched.map(m => {
    203.         return Object.keys(m.components).map(key => {
    204.           return m.components[key]
    205.         })
    206.       })
    207.     )
    208.   }
    210.   resolve (
    211.     to: RawLocation,
    212.     current?: Route,
    213.     append?: boolean
    214.   ): {
    215.     location: Location,
    216.     route: Route,
    217.     href: string,
    218.     // for backwards compat
    219.     normalizedTo: Location,
    220.     resolved: Route
    221.   } {
    222.     current = current || this.history.current
    223.     const location = normalizeLocation(to, current, append, this)
    224.     const route = this.match(location, current)
    225.     const fullPath = route.redirectedFrom || route.fullPath
    226.     const base = this.history.base
    227.     const href = createHref(base, fullPath, this.mode)
    228.     return {
    229.       location,
    230.       route,
    231.       href,
    232.       // for backwards compat
    233.       normalizedTo: location,
    234.       resolved: route
    235.     }
    236.   }
    238.   getRoutes () {
    239.     return this.matcher.getRoutes()
    240.   }
    242.   addRoute (parentOrRoute: string | RouteConfig, route?: RouteConfig) {
    243.     this.matcher.addRoute(parentOrRoute, route)
    244.     if (this.history.current !== START) {
    245.       this.history.transitionTo(this.history.getCurrentLocation())
    246.     }
    247.   }
    249.   addRoutes (routes: Array<RouteConfig>) {
    250.     if (process.env.NODE_ENV !== 'production') {
    251.       warn(false, 'router.addRoutes() is deprecated and has been removed in Vue Router 4. Use router.addRoute() instead.')
    252.     }
    253.     this.matcher.addRoutes(routes)
    254.     if (this.history.current !== START) {
    255.       this.history.transitionTo(this.history.getCurrentLocation())
    256.     }
    257.   }
    258. }

    实例化 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 方法
    history.transitionTo代码在 src/history/base.js

    1. transitionTo (
    2.   location: RawLocation,
    3.   onComplete?: Function,
    4.   onAbort?: Function
    5. ) {
    6.   let route
    7.   // catch redirect option https://github.com/vuejs/vue-router/issues/3201
    8.   try {
    9.     // 调用了this.matcher.match方法去做匹配
    10.     route = this.router.match(location, this.current)
    11.   } catch (e) {
    12.     this.errorCbs.forEach(cb => {
    13.       cb(e)
    14.     })
    15.     // Exception should still be thrown
    16.     throw e
    17.   }
    19.   // ...
    20. }

    大致对 VueRouter 类有了大致了解，知道了它的一些属性和方法，同时了解到在组件的初始化阶段，执行到 beforeCreate 钩子函数的时候会执行 router.init 方法，然后又会执行 history.transitionTo 方法做路由过渡，进而引出了 matcher 的概念