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

Posted 前端指南

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了专栏vue-router 源码阅读 - 文件结构与注册机制相关的知识，希望对你有一定的参考价值。


前端路由是我们前端开发日常开发中经常碰到的概念，在下在日常使用中知其然也好奇着所以然，因此对 vue-router 的源码进行了一些阅读，也汲取了社区的一些文章优秀的思想，于本文记录总结作为自己思考的输出，本人水平有限，欢迎留言讨论~

目标 vue-rouer 版本： 3.0.2

vue-router源码注释：vue-router-analysis

本文是系列文章，链接见底部 ~

0. 前备知识

  • Flow

  • ES6语法

  • 设计模式 - 外观模式

  • html5 History Api

如果你对这些还没有了解的话，可以看一下本文末尾的推介阅读。

1. 文件结构

首先我们来看看文件结构：

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

我们主要关注的就是 src 中的内容。

2. 入口文件

2.1 rollup 出口与入口

按照惯例，首先从 package.json 看起，这里有两个命令值得注意一下：

 
   
   
 
    
  
    
    
  
  1. {
    2. 
  
    
    
  
  2.     "scripts": {
    3. 
  
    
    
  
  3.         "dev:dist": "rollup -wm -c build/rollup.dev.config.js",
    4. 
  
    
    
  
  4.         "build": "node build/build.js"
    5. 
  
    
    
  
  5.   }
    6. 
  
    
    
  
  6. }
    7.

dev:dist 用配置文件 rollup.dev.config.js 生成 dist 目录下方便开发调试相关生成文件，对应于下面的配置环境 development；

build 是用 node 运行 build/build.js 生成正式的文件，包括 es6、 commonjs、 IIFE方式的导出文件和压缩之后的导出文件；

这两种方式都是使用 build/configs.js 这个配置文件来生成的，其中有一段语义化比较不错的代码挺有意思，跟 Vue 的配置生成文件比较类似：

 
   
   
 
    
  
    
    
  
  1. // vue-router/build/configs.js
    2. 
  
    
    
  

    3. 
  
    
    
  
  3. module.exports = [{                     // 打包出口
    4. 
  
    
    
  
  4.     file: resolve('dist/vue-router.js'),
    5. 
  
    
    
  
  5.     format: 'umd',
    6. 
  
    
    
  
  6.     env: 'development'
    7. 
  
    
    
  
  7.   },{
    8. 
  
    
    
  
  8.     file: resolve('dist/vue-router.min.js'),
    9. 
  
    
    
  
  9.     format: 'umd',
    10. 
  
    
    
  
  10.     env: 'production'
    11. 
  
    
    
  
  11.   },{
    12. 
  
    
    
  
  12.     file: resolve('dist/vue-router.common.js'),
    13. 
  
    
    
  
  13.     format: 'cjs'
    14. 
  
    
    
  
  14.   },{
    15. 
  
    
    
  
  15.     file: resolve('dist/vue-router.esm.js'),
    16. 
  
    
    
  
  16.     format: 'es'
    17. 
  
    
    
  
  17.   }
    18. 
  
    
    
  
  18. ].map(genConfig)
    19. 
  
    
    
  

    20. 
  
    
    
  
  20. function genConfig (opts) {
    21. 
  
    
    
  
  21.   const config = {
    22. 
  
    
    
  
  22.     input: {
    23. 
  
    
    
  
  23.       input: resolve('src/index.js'),     // 打包入口
    24. 
  
    
    
  
  24.       plugins: [...]
    25. 
  
    
    
  
  25.     },
    26. 
  
    
    
  
  26.     output: {
    27. 
  
    
    
  
  27.       file: opts.file,
    28. 
  
    
    
  
  28.       format: opts.format,
    29. 
  
    
    
  
  29.       banner,
    30. 
  
    
    
  
  30.       name: 'VueRouter'
    31. 
  
    
    
  
  31.     }
    32. 
  
    
    
  
  32.   }
    33. 
  
    
    
  
  33.   return config
    34. 
  
    
    
  
  34. }
    35.

可以清晰的看到 rollup 打包的出口和入口，入口是 src/index.js 文件，而出口就是上面那部分的配置， env 是开发/生产环境标记， format 为编译输出的方式：

  • es： ES Modules，使用ES6的模板语法输出

  • cjs： CommonJs Module，遵循CommonJs Module规范的文件输出

  • umd： 支持外链规范的文件输出，此文件可以直接使用script标签，其实也就是 IIFE 的方式

那么正式输出是使用 build 方式，我们可以从 src/index.js 看起

 
   
   
 
    
  
    
    
  
  1. // src/index.js
    2. 
  
    
    
  

    3. 
  
    
    
  
  3. import { install } from './install'
    4. 
  
    
    
  

    5. 
  
    
    
  
  5. export default class VueRouter { ... }
    6. 
  
    
    
  

    7. 
  
    
    
  
  7. VueRouter.install = install
    8.

首先这个文件导出了一个类 VueRouter，这个就是我们在 Vue 项目中引入 vue-router 的时候 Vue.use(VueRouter) 所用到的，而 Vue.use 的主要作用就是找注册插件上的 install方法并执行，往下看最后一行，从一个 install.js 文件中导出的 install 被赋给了 VueRouter.install，这就是 Vue.use 中执行所用到的 install 方法。

2.2 Vue.use

可以简单看一下 Vue 中 Vue.use 这个方法是如何实现的：

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

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

上面可以看到 Vue.use 这个方法就是执行待注册插件上的 install 方法，并将这个插件实例保存起来。值得注意的是 install 方法执行时的第一个参数是通过 unshift 推入的 this，因此 install 执行时可以拿到 Vue 对象。

对应上一小节，这里的 plugin.install 就是 VueRouter.install。

3. 路由注册

3.1 install

接之前，看一下 install.js 里面是如何进行路由插件的注册：

 
   
   
 
    
  
    
    
  
  1. // vue-router/src/install.js
    2. 
  
    
    
  

    3. 
  
    
    
  
  3. /* vue-router 的注册过程 Vue.use(VueRouter) */
    4. 
  
    
    
  
  4. export function install(Vue) {
    5. 
  
    
    
  
  5.   _Vue = Vue    // 这样拿到 Vue 不会因为 import 带来的打包体积增加
    6. 
  
    
    
  

    7. 
  
    
    
  
  7.   const isDef = v => v !== undefined
    8. 
  
    
    
  

    9. 
  
    
    
  
  9.   const registerInstance = (vm, callVal) => {
    10. 
  
    
    
  
  10.     let i = vm.$options._parentVnode // 至少存在一个 VueComponent 时, _parentVnode 属性才存在
    11. 
  
    
    
  
  11.     // registerRouteInstance 在 src/components/view.js
    12. 
  
    
    
  
  12.     if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
    13. 
  
    
    
  
  13.       i(vm, callVal)
    14. 
  
    
    
  
  14.     }
    15. 
  
    
    
  
  15.   }
    16. 
  
    
    
  

    17. 
  
    
    
  
  17.   // new Vue 时或者创建新组件时，在 beforeCreate 钩子中调用
    18. 
  
    
    
  
  18.   Vue.mixin({
    19. 
  
    
    
  
  19.     beforeCreate() {
    20. 
  
    
    
  
  20.       if (isDef(this.$options.router)) {  // 组件是否存在$options.router，该对象只在根组件上有
    21. 
  
    
    
  
  21.         this._routerRoot = this           // 这里的this是根vue实例
    22. 
  
    
    
  
  22.         this._router = this.$options.router      // VueRouter实例
    23. 
  
    
    
  
  23.         this._router.init(this)
    24. 
  
    
    
  
  24.         Vue.util.defineReactive(this, '_route', this._router.history.current)
    25. 
  
    
    
  
  25.       } else {                            // 组件实例才会进入，通过$parent一级级获取_routerRoot
    26. 
  
    
    
  
  26.         this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
    27. 
  
    
    
  
  27.       }
    28. 
  
    
    
  
  28.       registerInstance(this, this)
    29. 
  
    
    
  
  29.     },
    30. 
  
    
    
  
  30.     destroyed() {
    31. 
  
    
    
  
  31.       registerInstance(this)
    32. 
  
    
    
  
  32.     }
    33. 
  
    
    
  
  33.   })
    34. 
  
    
    
  

    35. 
  
    
    
  
  35.   // 所有实例中 this.$router 等同于访问 this._routerRoot._router
    36. 
  
    
    
  
  36.   Object.defineProperty(Vue.prototype, '$router', {
    37. 
  
    
    
  
  37.     get() { return this._routerRoot._router }
    38. 
  
    
    
  
  38.   })
    39. 
  
    
    
  

    40. 
  
    
    
  
  40.   // 所有实例中 this.$route 等同于访问 this._routerRoot._route
    41. 
  
    
    
  
  41.   Object.defineProperty(Vue.prototype, '$route', {
    42. 
  
    
    
  
  42.     get() { return this._routerRoot._route }
    43. 
  
    
    
  
  43.   })
    44. 
  
    
    
  

    45. 
  
    
    
  
  45.   Vue.component('RouterView', View)     // 注册公共组件 router-view
    46. 
  
    
    
  
  46.   Vue.component('RouterLink', Link)     // 注册公共组件 router-link
    47. 
  
    
    
  

    48. 
  
    
    
  
  48.   const strats = Vue.config.optionMergeStrategies
    49. 
  
    
    
  
  49.   strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created
    50. 
  
    
    
  
  50. }
    51.

install 方法主要分为几个部分：

  1. 通过 Vue.mixin 在 beforeCreate、 destroyed 的时候将一些路由方法挂载到每个 vue 实例中

  2. 给每个 vue 实例中挂载路由对象以保证在 methods 等地方可以通过 this.$router、 this.$route 访问到相关信息

  3. 注册公共组件 router-view、 router-link

  4. 注册路由的生命周期函数

Vue.mixin 将定义的两个钩子在组件 extend 的时候合并到该组件的 options 中，从而注册到每个组件实例。看看 beforeCreate，一开始访问了一个 this.$options.router 这个是 Vue 项目里面 app.js 中的 newVue({router}) 这里传入的这个 router，当然也只有在 newVue 这时才会传入 router，也就是说 this.$options.router 只有根实例上才有。这个传入 router 到底是什么呢，我们看看它的使用方式就知道了：

 
   
   
 
    
  
    
    
  
  1. const router = new VueRouter({
    2. 
  
    
    
  
  2.   mode: 'hash',
    3. 
  
    
    
  
  3.   routes: [{ path: '/', component: Home },
    4. 
  
    
    
  
  4.         { path: '/foo', component: Foo },
    5. 
  
    
    
  
  5.         { path: '/bar', component: Bar }]
    6. 
  
    
    
  
  6. })
    7. 
  
    
    
  

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

可以看到这个 this.$options.router 也就是 Vue 实例中的 this._route 其实就是 VueRouter 的实例。

剩下的一顿眼花缭乱的操作，是为了在每个 Vue 组件实例中都可以通过 _routerRoot 访问根 Vue 实例，其上的 _route、 _router 被赋到 Vue 的原型上，这样每个 Vue 的实例中都可以通过 this.$route、 this.$router 访问到挂载在根实例 _routerRoot 上的 _route、 _router，后面用 Vue 上的响应式化方法 defineReactive 来将 _route 响应式化，另外在根组件上用 this._router.init() 进行了初始化操作。

随便找个 Vue 组件，打印一下其上的 _routerRoot：

可以看到这是 Vue 的根组件。

3.2 VueRouter

在之前我们已经看过 src/index.js 了，这里来详细看一下 VueRouter 这个类

 
   
   
 
    
  
    
    
  
  1. // vue-router/src/index.js
    2. 
  
    
    
  

    3. 
  
    
    
  
  3. export default class VueRouter {  
    4. 
  
    
    
  
  4.   constructor(options: RouterOptions = {}) { }
    5. 
  
    
    
  

    6. 
  
    
    
  
  6.   /* install 方法会调用 init 来初始化 */
    7. 
  
    
    
  
  7.   init(app: any /* Vue组件实例 */) { }
    8. 
  
    
    
  

    9. 
  
    
    
  
  9.   /* createMatcher 方法返回的 match 方法 */
    10. 
  
    
    
  
  10.   match(raw: RawLocation, current?: Route, redirectedFrom?: Location) { }
    11. 
  
    
    
  

    12. 
  
    
    
  
  12.   /* 当前路由对象 */
    13. 
  
    
    
  
  13.   get currentRoute() { }
    14. 
  
    
    
  

    15. 
  
    
    
  
  15.   /* 注册 beforeHooks 事件 */
    16. 
  
    
    
  
  16.   beforeEach(fn: Function): Function { }
    17. 
  
    
    
  

    18. 
  
    
    
  
  18.   /* 注册 resolveHooks 事件 */
    19. 
  
    
    
  
  19.   beforeResolve(fn: Function): Function { }
    20. 
  
    
    
  

    21. 
  
    
    
  
  21.   /* 注册 afterHooks 事件 */
    22. 
  
    
    
  
  22.   afterEach(fn: Function): Function { }
    23. 
  
    
    
  

    24. 
  
    
    
  
  24.   /* onReady 事件 */
    25. 
  
    
    
  
  25.   onReady(cb: Function, errorCb?: Function) { }
    26. 
  
    
    
  

    27. 
  
    
    
  
  27.   /* onError 事件 */
    28. 
  
    
    
  
  28.   onError(errorCb: Function) { }
    29. 
  
    
    
  

    30. 
  
    
    
  
  30.   /* 调用 transitionTo 跳转路由 */
    31. 
  
    
    
  
  31.   push(location: RawLocation, onComplete?: Function, onAbort?: Function) { }
    32. 
  
    
    
  

    33. 
  
    
    
  
  33.   /* 调用 transitionTo 跳转路由 */
    34. 
  
    
    
  
  34.   replace(location: RawLocation, onComplete?: Function, onAbort?: Function) { }
    35. 
  
    
    
  

    36. 
  
    
    
  
  36.   /* 跳转到指定历史记录 */
    37. 
  
    
    
  
  37.   go(n: number) { }
    38. 
  
    
    
  

    39. 
  
    
    
  
  39.   /* 后退 */
    40. 
  
    
    
  
  40.   back() { }
    41. 
  
    
    
  

    42. 
  
    
    
  
  42.   /* 前进 */
    43. 
  
    
    
  
  43.   forward() { }
    44. 
  
    
    
  

    45. 
  
    
    
  
  45.   /* 获取路由匹配的组件 */
    46. 
  
    
    
  
  46.   getMatchedComponents(to?: RawLocation | Route) { }
    47. 
  
    
    
  

    48. 
  
    
    
  
  48.   /* 根据路由对象返回浏览器路径等信息 */
    49. 
  
    
    
  
  49.   resolve(to: RawLocation, current?: Route, append?: boolean) { }
    50. 
  
    
    
  

    51. 
  
    
    
  
  51.   /* 动态添加路由 */
    52. 
  
    
    
  
  52.   addRoutes(routes: Array<RouteConfig>) { }
    53. 
  
    
    
  
  53. }
    54.

VueRouter 类中除了一坨实例方法之外，主要关注的是它的构造函数和初始化方法 init。

首先看看构造函数，其中的 mode 代表路由创建的模式，由用户配置与应用场景决定，主要有三种 History、Hash、Abstract，前两种我们已经很熟悉了，Abstract 代表非浏览器环境，比如 Node、weex 等； this.history 主要是路由的具体实例。实现如下：

 
   
   
 
    
  
    
    
  
  1. // vue-router/src/index.js
    2. 
  
    
    
  

    3. 
  
    
    
  
  3. export default class VueRouter {  
    4. 
  
    
    
  
  4.   constructor(options: RouterOptions = {}) {
    5. 
  
    
    
  
  5.     let mode = options.mode || 'hash'       // 路由匹配方式，默认为hash
    6. 
  
    
    
  
  6.     this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false
    7. 
  
    
    
  
  7.     if (this.fallback) { mode = 'hash' }    // 如果不支持history则退化为hash
    8. 
  
    
    
  
  8.     if (!inBrowser) { mode = 'abstract' }   // 非浏览器环境强制abstract，比如node中
    9. 
  
    
    
  
  9.     this.mode = mode
    10. 
  
    
    
  

    11. 
  
    
    
  
  11.     switch (mode) {         // 外观模式
    12. 
  
    
    
  
  12.       case 'history':       // history 方式
    13. 
  
    
    
  
  13.         this.history = new HTML5History(this, options.base)
    14. 
  
    
    
  
  14.         break
    15. 
  
    
    
  
  15.       case 'hash':          // hash 方式
    16. 
  
    
    
  
  16.         this.history = new HashHistory(this, options.base, this.fallback)
    17. 
  
    
    
  
  17.         break
    18. 
  
    
    
  
  18.       case 'abstract':      // abstract 方式
    19. 
  
    
    
  
  19.         this.history = new AbstractHistory(this, options.base)
    20. 
  
    
    
  
  20.         break
    21. 
  
    
    
  
  21.       default: ...
    22. 
  
    
    
  
  22.     }
    23. 
  
    
    
  
  23.   }
    24. 
  
    
    
  
  24. }
    25.

init 初始化方法是在 install 时的 Vue.mixin 所注册的 beforeCreate 钩子中调用的，可以翻上去看看；调用方式是 this._router.init(this)，因为是在 Vue.mixin 里调用，所以这个 this 是当前的 Vue 实例。另外初始化方法需要负责从任一个路径跳转到项目中时的路由初始化，以 Hash 模式为例，此时还没有对相关事件进行绑定，因此在第一次执行的时候就要进行事件绑定与 popstate、 hashchange 事件触发，然后手动触发一次路由跳转。实现如下：

 
   
   
 
    
  
    
    
  
  1. // vue-router/src/index.js
    2. 
  
    
    
  

    3. 
  
    
    
  
  3. export default class VueRouter {  
    4. 
  
    
    
  
  4.   /* install 方法会调用 init 来初始化 */
    5. 
  
    
    
  
  5.   init(app: any /* Vue组件实例 */) {
    6. 
  
    
    
  
  6.     const history = this.history
    7. 
  
    
    
  

    8. 
  
    
    
  
  8.     if (history instanceof HTML5History) {
    9. 
  
    
    
  
  9.       // 调用 history 实例的 transitionTo 方法
    10. 
  
    
    
  
  10.       history.transitionTo(history.getCurrentLocation())
    11. 
  
    
    
  
  11.     } else if (history instanceof HashHistory) { 
    12. 
  
    
    
  
  12.       const setupHashListener = () => {
    13. 
  
    
    
  
  13.           history.setupListeners()      // 设置 popstate/hashchange 事件监听
    14. 
  
    
    
  
  14.       }
    15. 
  
    
    
  
  15.       history.transitionTo(             // 调用 history 实例的 transitionTo 方法
    16. 
  
    
    
  
  16. 
  
    
    
  
  17.           setupHashListener,            // 成功回调
    18. 
  
    
    
  
  18.           setupHashListener             // 失败回调
    19. 
  
    
    
  
  19.       )
    20. 
  
    
    
  
  20.     }
    21. 
  
    
    
  
  21.   }
    22. 
  
    
    
  
  22. }
    23.

除此之外，VueRouter 还有很多实例方法，用来实现各种功能的，剩下的将在系列文章分享 ~

本文是系列文章，随后会更新后面的部分，共同进步~

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

网上的帖子大多深浅不一，甚至有些前后矛盾，在下的文章都是学习过程中的总结，如果发现错误，欢迎留言指出~

推介阅读：

  1. H5 History Api - MDN

  2. ECMAScript 6 入门 - 阮一峰

  3. JS 静态类型检查工具 Flow - SegmentFault 思否

  4. JS 外观模式 - SegmentFault 思否

  5. 前端路由跳转基本原理 - 掘金

参考：

  1. Vue.js 技术揭秘


以上是关于专栏vue-router 源码阅读 - 文件结构与注册机制的主要内容，如果未能解决你的问题，请参考以下文章

vue-router源码第一步阅读

vue-router源码第一步阅读

vue-router源码第一步阅读

结合 Sentinel 专栏谈谈我的源码阅读方法

vue.js 源码阅读：文件结构与运行机制

基于区块链与IPFS的数据共享系统设计与搭建（附区块链部分源码）