vue-router 源码阅读 - 文件结构与注册机制

.
├── build                   // 打包相关配置
├── scripts                 // 构建相关
├── dist                    // 构建后文件目录
├── docs                    // 项目文档
├── docs-gitbook            // gitbook配置
├── examples                // 示例代码，调试的时候使用
├── flow                    // Flow 声明
├── src                     // 源码目录
│   ├── components          // 公共组件
│   ├── history             // 路由类实现
│   ├── util                // 相关工具库
│   ├── create-matcher.js   // 根据传入的配置对象创建路由映射表
│   ├── create-route-map.js    // 根据routes配置对象创建路由映射表 
│   ├── index.js            // 主入口
│   └── install.js          // VueRouter装载入口
├── test                    // 测试文件
└── types                   // TypeScript 声明

{
    "scripts": {
        "dev:dist": "rollup -wm -c build/rollup.dev.config.js",
        "build": "node build/build.js"
  }
}

// vue-router/build/configs.js

module.exports = [{                     // 打包出口
    file: resolve('dist/vue-router.js'),
    format: 'umd',
    env: 'development'
  },{
    file: resolve('dist/vue-router.min.js'),
    format: 'umd',
    env: 'production'
  },{
    file: resolve('dist/vue-router.common.js'),
    format: 'cjs'
  },{
    file: resolve('dist/vue-router.esm.js'),
    format: 'es'
  }
].map(genConfig)

function genConfig (opts) {
  const config = {
    input: {
      input: resolve('src/index.js'),     // 打包入口
      plugins: [...]
    },
    output: {
      file: opts.file,
      format: opts.format,
      banner,
      name: 'VueRouter'
    }
  }
  return config
}

// src/index.js

import { install } from './install'

export default class VueRouter { ... }

VueRouter.install = install

// vue/src/core/global-api/use.js

export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) {
    // ... 省略一些判重操作
    const args = toArray(arguments, 1)
    args.unshift(this)            // 注意这个this，是vue对象
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    }
    return this
  }
}

// vue-router/src/install.js

/* vue-router 的注册过程 Vue.use(VueRouter) */
export function install(Vue) {
  _Vue = Vue    // 这样拿到 Vue 不会因为 import 带来的打包体积增加
  
  const isDef = v => v !== undefined
  
  const registerInstance = (vm, callVal) => {
    let i = vm.$options._parentVnode // 至少存在一个 VueComponent 时, _parentVnode 属性才存在
    // registerRouteInstance 在 src/components/view.js
    if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
      i(vm, callVal)
    }
  }
  
  // new Vue 时或者创建新组件时，在 beforeCreate 钩子中调用
  Vue.mixin({
    beforeCreate() {
      if (isDef(this.$options.router)) {  // 组件是否存在$options.router，该对象只在根组件上有
        this._routerRoot = this           // 这里的this是根vue实例
        this._router = this.$options.router      // VueRouter实例
        this._router.init(this)
        Vue.util.defineReactive(this, '_route', this._router.history.current)
      } else {                            // 组件实例才会进入，通过$parent一级级获取_routerRoot
        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
      }
      registerInstance(this, this)
    },
    destroyed() {
      registerInstance(this)
    }
  })
  
  // 所有实例中 this.$router 等同于访问 this._routerRoot._router
  Object.defineProperty(Vue.prototype, '$router', {
    get() { return this._routerRoot._router }
  })
  
  // 所有实例中 this.$route 等同于访问 this._routerRoot._route
  Object.defineProperty(Vue.prototype, '$route', {
    get() { return this._routerRoot._route }
  })
  
  Vue.component('RouterView', View)     // 注册公共组件 router-view
  Vue.component('RouterLink', Link)     // 注册公共组件 router-link
  
  const strats = Vue.config.optionMergeStrategies
  strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created
}

const router = new VueRouter({
  mode: 'hash',
  routes: [{ path: '/', component: Home },
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar }]
})

new Vue({
  router,
  template: `<div id="app"></div>`
}).$mount('#app')

// vue-router/src/index.js

export default class VueRouter {  
  constructor(options: RouterOptions = {}) { }
  
  /* install 方法会调用 init 来初始化 */
  init(app: any /* Vue组件实例 */) { }
  
  /* createMatcher 方法返回的 match 方法 */
  match(raw: RawLocation, current?: Route, redirectedFrom?: Location) { }
  
  /* 当前路由对象 */
  get currentRoute() { }
  
  /* 注册 beforeHooks 事件 */
  beforeEach(fn: Function): Function { }
  
  /* 注册 resolveHooks 事件 */
  beforeResolve(fn: Function): Function { }
  
  /* 注册 afterHooks 事件 */
  afterEach(fn: Function): Function { }
  
  /* onReady 事件 */
  onReady(cb: Function, errorCb?: Function) { }
  
  /* onError 事件 */
  onError(errorCb: Function) { }
  
  /* 调用 transitionTo 跳转路由 */
  push(location: RawLocation, onComplete?: Function, onAbort?: Function) { }
  
  /* 调用 transitionTo 跳转路由 */
  replace(location: RawLocation, onComplete?: Function, onAbort?: Function) { }
  
  /* 跳转到指定历史记录 */
  go(n: number) { }
  
  /* 后退 */
  back() { }
  
  /* 前进 */
  forward() { }
  
  /* 获取路由匹配的组件 */
  getMatchedComponents(to?: RawLocation | Route) { }
  
  /* 根据路由对象返回浏览器路径等信息 */
  resolve(to: RawLocation, current?: Route, append?: boolean) { }
  
  /* 动态添加路由 */
  addRoutes(routes: Array<RouteConfig>) { }
}

// vue-router/src/index.js

export default class VueRouter {  
  constructor(options: RouterOptions = {}) {
    this.matcher = createMatcher(options.routes || [], this)    // 添加路由匹配器
    let mode = options.mode || 'hash'       // 路由匹配方式，默认为hash
    this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false
    if (this.fallback) { mode = 'hash' }    // 如果不支持history则退化为hash
    if (!inBrowser) { mode = 'abstract' }   // 非浏览器环境强制abstract，比如node中
    this.mode = mode
    
    switch (mode) {         // 外观模式
      case 'history':       // history 方式
        this.history = new HTML5History(this, options.base)
        break
      case 'hash':          // hash 方式
        this.history = new HashHistory(this, options.base, this.fallback)
        break
      case 'abstract':      // abstract 方式
        this.history = new AbstractHistory(this, options.base)
        break
      default: ...
    }
  }
}

// vue-router/src/index.js

export default class VueRouter {  
  /* install 方法会调用 init 来初始化 */
  init(app: any /* Vue组件实例 */) {
    const history = this.history
    
    if (history instanceof HTML5History) {
      // 调用 history 实例的 transitionTo 方法
      history.transitionTo(history.getCurrentLocation())
    } else if (history instanceof HashHistory) { 
      const setupHashListener = () => {
          history.setupListeners()      // 设置 popstate/hashchange 事件监听
      }
      history.transitionTo(             // 调用 history 实例的 transitionTo 方法
          history.getCurrentLocation(), // 浏览器 window 地址的 hash 值
          setupHashListener,            // 成功回调
          setupHashListener             // 失败回调
      )
    }
  }
}