插件注册

代码结构

.
├── index.js
└── install.js

插件需要实现 install 方法，Vue.use() 时需要调用。

index.js

import install, { Vue } from "./install";

class VueRouter {
    constructor (options) {
        // 用户传递的路由配置, 需要对这个配置进行路由映射
        let routes = options.routes;
    }
}

VueRouter.install = install;

export default VueRouter;

• 把根实例挂载到每个组件上
  • 在 Vue.mixin 的 beforeCreate 钩子中，根据 $options.router 来判断是否是根组件，如果是，就添加 _routerRoot 属性来存储根实例，其余子组件都从其 $parent 上获取 _routerRoot。
• 暴露 $router 属性到实例上，用于方便获取 router 实例。
• 添加两个全局组件 router-view 、 router-link 。

install.js

export let Vue;

function install(_Vue) {
    Vue = _Vue; // 将传入的 Vue 的构造函数变为全局的
    Vue.mixin({ // mergeOptions 所有组件初始化都回采用这个方法
        beforeCreate() {
            // 只有 new Vue 的时候的那个根实例才有 router, 根据这个判断是不是根实例
            // 组件渲染是从父到子的
            if (this.$options.router) {
                // 根实例上才传递了 router
                this._routerRoot = this; // 根实例
                this._router = this.$options.router;
            } else {
                this._routerRoot = this.$parent && this.$parent._routerRoot;
            }
            // 这样在组件中都可以用 this._routerRoot._router 拿到 router 实例
        }
    });
    // 通过 defineProperty 而不是 Vue.prototype.$router 去赋值的原因是, 如果有多个 new Vue , 只会给使用了 vue-router 的实例返回 $router; 没有使用的不会有返回值
    Object.defineProperty(Vue.prototype, '$router', {
        get() {
            return this._routerRoot && this._routerRoot._router;
        }
    });

    Vue.component('router-link', {
        render() {
            return <a>{ this.$slots.default }</a>
        }
    });

    Vue.component('router-view', {
        render() {
            return <div>empty</div>
        }
    });
}

export default install;

路由管理

思路：

• 创建一个路由管理工具（create-matcher），提供 addRoute 、 addRoutes 等管理路由的方法
• 创建一个路由映射工具（create-route-map），把 path路径 和 record记录 关联起来

路由管理工具

导出三个方法分别是 addRoutes 、 addRoute 、 match

create-matcher.js

import createRouteMap from "./create-route-map";

function createMatcher(routes) {
  const { pathMap } = createRouteMap(routes);
  function addRoutes(routes) { // 动态添加路由
      createRouteMap(routes, pathMap);
  }
  function addRoute(route) {
      createRouteMap([route], pathMap);
  }
  function match(location) {
      return pathMap[location];
  }
  return {
      addRoutes, // 添加多个路由
      addRoute,  // 添加单个路由
      match,     // 根据路径返回对应路由
  }
}

export default createMatcher;

路由映射工具