vue-router 源代码全流程分析「长文」

4,270 阅读12分钟

说明

  • 以下内容均是依托 vue-router 2.0.0 版本展开分析。
  • 此篇文章,是自己对 vue-router 实现分析的记录性文章,如有任何错误,欢迎指正,相互交流。

基础使用

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const Home = { template: '<div>home</div>' };
const Foo = { template: '<div>foo</div>' };
const Bar = { template: '<div>bar</div>' };
const Child = { template: '<div>Child</div>' };

const router = new VueRouter({
  mode: 'history',
  // base: __dirname,
  base: '/', // 默认 ‘/’
  routes: [
    { path: '/', component: Home },
    { path: '/foo', component: Foo },
    {
      path: '/bar',
      component: Bar,
      children: [{ path: 'child', component: Child }]
    }
  ]
});

const template = `
<div id="app">
  <h1>Basic</h1>
  <ul>
    <li><router-link to="/">/</router-link></li>
    <li><router-link to="/foo">/foo</router-link></li>
    <li><router-link to="/bar">/bar</router-link></li>
    <li><router-link to="/bar/child">/bar</router-link></li>
  </ul>
  <router-view class="view"></router-view>
</div>
`;

new Vue({
  router,
  template
}).$mount('#app');

根据上述基础使用,我们大概可以梳理一个基本流程出来:

  • 注册插件:
    • $router$route 注入所有启用路由的子组件。
    • 安装 <router-view><router-link>
  • 定义路由组件。
  • new VueRouter(options) 创建一个路由器, 传入相关配置。
  • 创建并挂载根实例,确保注入路由器。路由组件将在 <router-view> 中呈现。

下面我们就根据上述流程步骤,一步一步解析,vue-router 代码实现。

注册插件(vue-router)

首先 Vue.use(VueRouter); 这段代码间接执行 VueRouter 暴露的 install 方法,下面来看看 install 具体实现:(由于有完整的注释,故略去文字叙述)

install

import View from './components/view';
import Link from './components/link';

/**
 * 安装 Vue.js 插件 install 方法调用时,会将 Vue 作为参数传入。
 *
 * @export
 * @param {*} Vue
 * @returns
 *
 */
export function install(Vue) {
  // 防止插件被多次安装 - 当 install 方法被同一个插件多次调用,插件将只会被安装一次。
  if (install.installed) return;
  install.installed = true;

  // 在 Vue 原型上添加 $router 属性( VueRouter )并代理到 this.$root._router
  Object.defineProperty(Vue.prototype, '$router', {
    get() {
      return this.$root._router;
    }
  });

  // 在 Vue 原型上添加 $route 属性( 当前路由对象 )并代理到 this.$root._route
  Object.defineProperty(Vue.prototype, '$route', {
    get() {
      return this.$root._route;
    }
  });

  // 全局注册一个混入,影响注册之后所有创建的每个 Vue 实例。
  Vue.mixin({
    /**
     * 混入 Vue 创建前钩子
     * 1.取传入 Vue 构造函数的路由配置参数并调用 init 方法。
     * 2.在 Vue 根实例添加 _router 属性( VueRouter 实例)
     * 3.执行路由实例的 init 方法并传入 Vue 实例
     * 4.把 ($route <=> _route) 处理为响应式的。
     */
    beforeCreate() {
      if (this.$options.router) {
        this._router = this.$options.router;
        this._router.init(this);
        Vue.util.defineReactive(this, '_route', this._router.history.current);
      }
    }
  });

  // 注册全局组件
  Vue.component('router-view', View);
  Vue.component('router-link', Link);
}

上述 就是 vue-router 暴露给 Vue 的注册方法。这里特别说明一下:defineReactive Vue 构建响应式的核心方法。在研究注册的两个全局组件:<router-view><router-link>之前,我们先讨论 VueRouter 构造函数,因为它们其中涉及到 VueRouter 的很多方法。

代码接着执行,接下来就是为 vue-router 装填配置并实例化。之后把实例化的结果传入 Vue

const router = new VueRouter({
  // 选择路由模式
  mode: 'history',
  // 应用的基路径。默认值: "/" 例如,如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 "/app/".
  base: '/', // 默认 ‘/’
  // 路由配置表
  routes: [
    { path: '/', component: Home },
    { path: '/foo', component: Foo },
    {
      path: '/bar',
      component: Bar,
      children: [{ path: 'child', component: Child }]
    }
  ]
});

new Vue({
  router
}).$mount('#app');

接下来我们就来看看定义路由的 VueRouter 构造函数。

定义路由:VueRouter 构造函数

/* @flow */

import { install } from './install';
import { createMatcher } from './create-matcher';
import { HashHistory } from './history/hash';
import { HTML5History } from './history/html5';
import { AbstractHistory } from './history/abstract';
import { inBrowser, supportsHistory } from './util/dom';
import { assert } from './util/warn';

export default class VueRouter {
  static install: () => void;

  app: any; // Vue 实例
  options: RouterOptions; // 路由配置
  mode: string; // 路由模式,默认 hash
  history: HashHistory | HTML5History | AbstractHistory;
  match: Matcher; // 一个数组,包含当前路由的所有嵌套路径片段的路由记录。?
  fallback: boolean; // 当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式。默认值为 true。
  beforeHooks: Array<?NavigationGuard>; // 前置钩子集合
  afterHooks: Array<?(to: Route, from: Route) => any>; // 后置钩子集合

  constructor(options: RouterOptions = {}) {
    this.app = null;
    this.options = options;
    this.beforeHooks = [];
    this.afterHooks = [];
    this.match = createMatcher(options.routes || []); // 匹配器

    /******* 确定路由模式 - 默认为 hash *******/
    let mode = options.mode || 'hash';
    // 如果传入的模式为 ·history· 在浏览器环境下不支持 history 模式,则强制回退到 hash 模式
    this.fallback = mode === 'history' && !supportsHistory;
    if (this.fallback) {
      mode = 'hash';
    }
    // 在非浏览器环境下,采用 abstract 模式
    if (!inBrowser) {
      mode = 'abstract';
    }
    this.mode = mode;
  }

  /**
   * 当前路由
   *
   * @readonly
   * @type {?Route}
   * @memberof VueRouter
   */
  get currentRoute(): ?Route {
    return this.history && this.history.current;
  }

  /**
   * 初始化
   * @param {Any} app Vue component instance
   */
  init(app: any) {
    // 断言有没有安装插件,如果没有抛出错误提示
    assert(
      install.installed,
      `没有安装。在创建根实例之前,请确保调用 Vue.use(VueRouter)。`
    );

    this.app = app;
    const { mode, options, fallback } = this;
    // 根据不同模式实例化不同基类,无效模式下抛出错误
    switch (mode) {
      case 'history':
        this.history = new HTML5History(this, options.base);
        break;
      case 'hash':
        this.history = new HashHistory(this, options.base, fallback);
        break;
      case 'abstract':
        this.history = new AbstractHistory(this);
        break;
      default:
        assert(false, `invalid mode: ${mode}`);
    }

    // 调用 history 属性下 listen 方法?
    this.history.listen(route => {
      this.app._route = route;
    });
  }

  /**
   * Router 实例方法 beforeEach 全局前置的导航守卫。
   * 当一个导航触发时,全局前置守卫按照创建顺序调用。
   * 守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。
   *
   * @param {Function} fn (to, from, next) => {}
   * @memberof VueRouter
   *
   */
  beforeEach(fn: Function) {
    this.beforeHooks.push(fn);
  }

  /**
   * Router 实例方法 afterEach 全局后置钩子
   *
   * @param {Function} fn (to, from) => {}
   * @memberof VueRouter
   */
  afterEach(fn: Function) {
    this.afterHooks.push(fn);
  }

  /**
   * 编程式导航 push 导航到对应的 location
   * 这个方法会向 history 栈添加一个新的记录,
   * 所以,当用户点击浏览器后退按钮时,则回到之前的 location。
   *
   * @param {RawLocation} location
   * @memberof VueRouter
   */
  push(location: RawLocation) {
    this.history.push(location);
  }

  /**
   * 编程式导航 replace 导航到对应的 location
   * 它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。
   *
   * @param {RawLocation} location
   * @memberof VueRouter
   */
  replace(location: RawLocation) {
    this.history.replace(location);
  }

  /**
   * 在 history 记录中向前或者后退多少步,类似 window.history.go(n)。
   *
   * @param {number} n
   * @memberof VueRouter
   */
  go(n: number) {
    this.history.go(n);
  }

  /**
   * 后退
   *
   * @memberof VueRouter
   */
  back() {
    this.go(-1);
  }

  /**
   * 前进
   *
   * @memberof VueRouter
   */
  forward() {
    this.go(1);
  }

  /**
   * 获取匹配到的组件列表
   *
   * @returns {Array<any>}
   * @memberof VueRouter
   */
  getMatchedComponents(): Array<any> {
    if (!this.currentRoute) {
      return [];
    }
    return [].concat.apply(
      [],
      this.currentRoute.matched.map(m => {
        return Object.keys(m.components).map(key => {
          return m.components[key];
        });
      })
    );
  }
}

// 添加 install 方法
VueRouter.install = install;

// 在浏览器环境下且 Vue 构造函数存在的情况下调用 use 方法注册插件(插件预装)
if (inBrowser && window.Vue) {
  window.Vue.use(VueRouter);
}

由上述代码实现分析,首先声明了一些属性、方法、和常用的API;接着添加 install 方法和执行 Vue.use 方法注册插件。

其中对相关代码做了详细的注释,无需再此重复论述,但其中有一些方法将在后面涉及时,做深入分析。继续分析前,这里需要先对这段代码进行解释:

this.match = createMatcher(options.routes || []); // 创建匹配器
/**
 * 创建匹配器
 *
 * @export
 * @param {Array<RouteConfig>} routes
 * @returns {Matcher}
 */
export function createMatcher(routes: Array<RouteConfig>): Matcher {
  const { pathMap, nameMap } = createRouteMap(routes);

  function match(
    raw: RawLocation,
    currentRoute?: Route,
    redirectedFrom?: Location
  ): Route {
    ...
    return _createRoute(null, location);
  }

  function redirect(record: RouteRecord, location: Location): Route {
    ...
  }

  function alias(
    record: RouteRecord,
    location: Location,
    matchAs: string
  ): Route {
    ...
  }

  function _createRoute(
    record: ?RouteRecord,
    location: Location,
    redirectedFrom?: Location
  ): Route {
    ...
  }

  return match;
}

上述代码首先根据传入的路由配置表,创建新的映射表并从中解构出路径映射表、名称映射表,之后返回内建函数 match。这里暂时先不对其内部实现做详细介绍,之后再被调用处详细论述。

初始化

我们知道在 VueRouter - install 注册插件这个方法时,混入了一个全局的生命周期函数 beforeCreate, 代码如下:

export function install(Vue) {
  ...

  Vue.mixin({
    beforeCreate() {
      if (this.$options.router) {
        this._router = this.$options.router;
        this._router.init(this);
        Vue.util.defineReactive(this, '_route', this._router.history.current);
      }
    }
  });

  ...

}

我们发现其中执行了 vue-router 提供的 init 方法并传入 Vue 组件实例。那么接下来我们就来看看 init 做了哪些事情。

init 方法简析


export default class VueRouter {
  static install: () => void;

  app: any; // vue 实例
  options: RouterOptions; // 路由配置
  mode: string; // 路由模式,默认 hash
  history: HashHistory | HTML5History | AbstractHistory;
  match: Matcher; // 一个数组,包含当前路由的所有嵌套路径片段的路由记录 。
  fallback: boolean; // 回退 当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式。默认值为 true。
  beforeHooks: Array<?NavigationGuard>; // 前置钩子集合
  afterHooks: Array<?(to: Route, from: Route) => any>; // 后置钩子集合

  constructor(options: RouterOptions = {}) {
    ...
  }

  ...

  /**
   * 初始化
   * @param {Any} app Vue component instance
   */
  init(app: any) {
    // 断言有没有安装插件,如果没有抛出错误提示
    assert(
      install.installed,
      `没有安装。在创建根实例之前,请确保调用 Vue.use(VueRouter)。`
    );

    this.app = app;
    const { mode, options, fallback } = this;
    // 根据不同模式实例化不同基类,无效模式下抛出错误
    switch (mode) {
      case 'history':
        this.history = new HTML5History(this, options.base);
        break;
      case 'hash':
        this.history = new HashHistory(this, options.base, fallback);
        break;
      case 'abstract':
        this.history = new AbstractHistory(this);
        break;
      default:
        assert(false, `invalid mode: ${mode}`);
    }

    // 执行父类监听函数,注册回调
    this.history.listen(route => {
      this.app._route = route;
    });
  }

  ...

}

上述代码实现:

  • 首先断言有没有安装插件,如果没有抛出错误提示。
  • VueRouter 上添加 Vue 实例.
  • 根据不同模式实例化不同基类,无效模式下抛出错误
  • 执行父类监听函数,注册回调:
    • 在路由改变时替换 vue 实例上 _route 当前匹配的路由对象属性
    • 响应式值得改变,从而触发视图的重新渲染
    • <router-view> 中拿到匹配的路由对象,渲染匹配到的路由组件。完成跳转。

根据上述基础示例,选用的 history 模式。我们先看一下该模式的实现。

HTML5History

/**
 * h5 - history 模式
 *
 * @export
 * @class HTML5History
 * @extends {History}
 */
export class HTML5History extends History {
  constructor(router: VueRouter, base: ?string) {
    // 调用父类,并传入VueRouter路由实例和基础路径
    super(router, base);

    // 跳转核心方法 跳转到跟=基础路径
    this.transitionTo(getLocation(this.base));

    const expectScroll = router.options.scrollBehavior;
    // 添加 popstate 监听函数
    window.addEventListener('popstate', e => {
      _key = e.state && e.state.key;
      const current = this.current;
      this.transitionTo(getLocation(this.base), next => {
        if (expectScroll) {
          this.handleScroll(next, current, true);
        }
      });
    });

    // 若存在滚动行为配置,则添加 scroll 监听函数
    if (expectScroll) {
      window.addEventListener('scroll', () => {
        saveScrollPosition(_key);
      });
    }
  }

  /**
   * 前进对应步数
   *
   * @param {number} n
   * @memberof HTML5History
   */
  go(n: number) {
    // 通过当前页面的相对位置从浏览器历史记录( 会话记录 )加载页面
    window.history.go(n);
  }

  /**
   * 导航到不同的 location 向 history 栈添加一个新的记录
   *
   * @param {RawLocation} location
   * @memberof HTML5History
   */
  push(location: RawLocation) {
    // 拿到当前路由对象
    const current = this.current;
    // 调用跳转核心方法
    this.transitionTo(location, route => {
      pushState(cleanPath(this.base + route.fullPath));
      this.handleScroll(route, current, false);
    });
  }

  /**
   * 导航到不同的 location 替换掉当前的 history 记录。
   *
   * @param {RawLocation} location
   * @memberof HTML5History
   */
  replace(location: RawLocation) {
    const current = this.current;
    this.transitionTo(location, route => {
      replaceState(cleanPath(this.base + route.fullPath));
      this.handleScroll(route, current, false);
    });
  }

  /**
   * 更新 URL
   *
   * @memberof HTML5History
   */
  ensureURL() {
    if (getLocation(this.base) !== this.current.fullPath) {
      replaceState(cleanPath(this.base + this.current.fullPath));
    }
  }

  /**
   * 处理页面切换时,滚动位置
   *
   * @param {Route} to 将要去的路由对象
   * @param {Route} from 当前路由对象
   * @param {boolean} isPop 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用
   * @memberof HTML5History
   */
  handleScroll(to: Route, from: Route, isPop: boolean) {
    const router = this.router;
    // 若当前 Vue 组件实例不存在,直接return
    if (!router.app) {
      return;
    }

    // 取路由 滚动行为 配置参数。 若不存在直接 return
    // 使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样
    // 只在html5历史模式下可用; 默认没有滚动行为; 返回false以防止滚动.
    // { x: number, y: number }
    // { selector: string, offset? : { x: number, y: number }}
    const behavior = router.options.scrollBehavior;
    if (!behavior) {
      return;
    }
    // 断言 其必须是函数,否则抛出异常
    assert(typeof behavior === 'function', `scrollBehavior must be a function`);

    // 等到重新渲染完成后再滚动
    router.app.$nextTick(() => {
      // 获取滚动位置
      let position = getScrollPosition(_key);
      // 获取回调返回的滚动位置的对象信息
      const shouldScroll = behavior(to, from, isPop ? position : null);
      // 若不存在直接 return
      if (!shouldScroll) {
        return;
      }
      const isObject = typeof shouldScroll === 'object';
      // 处理模拟“滚动到锚点”的行为
      if (isObject && typeof shouldScroll.selector === 'string') {
        const el = document.querySelector(shouldScroll.selector);
        if (el) {
          position = getElementPosition(el);
        } else if (isValidPosition(shouldScroll)) {
          position = normalizePosition(shouldScroll);
        }
      } else if (isObject && isValidPosition(shouldScroll)) {
        position = normalizePosition(shouldScroll);
      }

      if (position) {
        // 把内容滚动到指定的坐标
        window.scrollTo(position.x, position.y);
      }
    });
  }
}

HTML5History 实现简析:

  • 根据 init 方法 model: history 实例化 new HTML5History(this, options.base) 调用构造函数并传入 VueRouter 和 应用的基路径。
  • 构造函数
    • 调用父类 super(router, base),并传入 VueRouter 路由实例和基础路径;
    • 调用核心过渡跳转方法 跳转到应用的基路径;
    • 定义 popstate 监听函数, 并在回调里做相应跳转处理;
    • 若在实例化 VueRouter 传入滚动行为配置 scrollBehavior 则添加滚动监听事件。回调为:滚动到上次标记位置点。
  • 定义相应 Router 实例方法;和一些父类里调用子类实现的方法。

对于其提供的方法有很详细的注释信息,故接下来我们直接来看看父类的实现,其它两种模式也是继承了这个基类 History

History


/**
 * History 基类
 *
 * @export
 * @class History
 */
export class History {
  router: VueRouter;
  base: string;
  current: Route;
  pending: ?Route;
  cb: (r: Route) => void;

  // 以下这些方法由子类去实现
  go: (n: number) => void;
  push: (loc: RawLocation) => void;
  replace: (loc: RawLocation) => void;
  ensureURL: () => void; // 更新URL

  constructor(router: VueRouter, base: ?string) {
    // VueRouter 实例
    this.router = router
    // 应用的基路径
    this.base = normalizeBase(base)
    // 从一个表示 “nowhere” 的 route 对象开始
    this.current = START
    // 等待状态标志
    this.pending = null
  }

  /**
   * 注册回调
   *
   * @param {Function} cb
   * @memberof History
   */
  listen(cb: Function) {
    this.cb = cb;
  }

  /**
   * 核心跳转方法
   *
   * @param {RawLocation} location
   * @param {Function} [cb]
   * @memberof History
   */
  transitionTo(location: RawLocation, cb?: Function) { ... }

  // 最终过渡
  confirmTransition(route: Route, cb: Function) { ... }

  // 路由更新
  updateRoute(route: Route) { ... }
}

/**
 * 规范化应用的基路径
 *
 * @param {?string} base
 * @returns {string}
 */
function normalizeBase(base: ?string): string {
  if (!base) {
    if (inBrowser) {
      // respect <base> tag
      // HTML <base> 元素 指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 <base> 元素。
      const baseEl = document.querySelector('base')
      base = baseEl ? baseEl.getAttribute('href') : '/'
    } else {
      base = '/'
    }
  }
  // 确保有开始斜杠
  if (base.charAt(0) !== '/') {
    base = '/' + base
  }
  // 去除末尾斜杠
  return base.replace(/\/$/, '')
}

  • 上述是 History 基类中所有代码实现。同样是添加几个属性,和一些跳转所需的核心方法。这里只需要大概了解其内部大概实现,之后会详细论述。
  • 回到 HTML5History 构造函数的执行代码 this.transitionTo(getLocation(this.base)),调用核心过渡跳转方法 跳转到应用的基路径。

核心跳转方法 transitionTo

根据上述例子初始化时调用(HTML5History - this.transitionTo(getLocation(this.base));),这里的入参是:location: /, cb: undefined


/**
  * 核心跳转方法
  *
  * @param {RawLocation} location 地址
  * @param {Function} [cb] 回调
  * @memberof History
  */
transitionTo(location: RawLocation, cb?: Function) {
  // 获取路由匹配信息,传入 location 和 current属性
  const route = this.router.match(location, this.current)
  // 调用最终跳转方法,并传入路由对象信息,和回调
  // 回调:更新路由,执行传入回调, 更新 URL
  this.confirmTransition(route, () => {
    this.updateRoute(route)
    cb && cb(route)
    this.ensureURL()
  })
}

根据上述代码实现简析:

  • 传入地址和 current 属性,current 属性在调用 super 在父类里初始时被赋值为 START

    // vue-router/src/history/base.js
    // 从一个表示 “nowhere” 的 route 对象开始
    this.current = START;
    
    START 代码实现及结果展示

    START

    // 表示初始状态的起始路径
    export const START = createRoute(null, {
      path: '/'
    });
    
    /**
     * 创建一个路由对象
     *
     * @export
     * @param {?RouteRecord} record
     * @param {Location} location
     * @param {Location} [redirectedFrom]
     * @returns {Route}
     */
    export function createRoute(
      record: ?RouteRecord,
      location: Location,
      redirectedFrom?: Location
    ): Route {
      const route: Route = {
        name: location.name || (record && record.name),
        meta: (record && record.meta) || {},
        path: location.path || '/',
        hash: location.hash || '',
        query: location.query || {},
        params: location.params || {},
        fullPath: getFullPath(location),
        matched: record ? formatMatch(record) : []
      };
      // 这里暂时不说
      if (redirectedFrom) {
        route.redirectedFrom = getFullPath(redirectedFrom);
      }
      return Object.freeze(route);
    }
    
    /**
     * 格式化匹配
     *
     * @param {?RouteRecord} record
     * @returns {Array<RouteRecord>}
     */
    function formatMatch(record: ?RouteRecord): Array<RouteRecord> {
      const res = [];
      while (record) {
        res.unshift(record);
        record = record.parent;
      }
      return res;
    }
    
    /**
     * 获取完整路径
     *
     * @param {*} { path, query = {}, hash = '' }
     * @returns
     */
    function getFullPath({ path, query = {}, hash = '' }) {
      return (path || '/') + stringifyQuery(query) + hash;
    }
    

    START 结果如下:

      START = {
        fullPath: "/",
        hash: "",
        matched: [],
        meta: {},
        name: null,
        params: {},
        path: "/",
        query: {},
        __proto__: Object,
        ,
      }
    
  • 首先调用 VueRouter 类的 match 属性, 该属性在初始化 VueRouter被赋值为一个方法。

    // vue-router/src/index.js
    this.match = createMatcher(options.routes || []);
    
    createMatcher 生成 match 的代码实现

    createMatcher 实现

    • 首先调用 createRouteMap 传入路由映射表,解构出路径、名称映射表
    • 定义内建方法 match redirect _createRoute 最后 return match
    /**
      * 创建匹配器
      *
      * @export
      * @param {Array<RouteConfig>} routes
      * @returns {Matcher}
      */
      export function createMatcher(routes: Array<RouteConfig>): Matcher {
    
        const { pathMap, nameMap } = createRouteMap(routes);
    
        // 匹配函数
        function match(
          raw: RawLocation,
          currentRoute?: Route,
          redirectedFrom?: Location
        ): Route {
          ...
          return _createRoute(null, location);
        }
    
        // 重定向处理函数
        function redirect(record: RouteRecord, location: Location): Route {
          ...
        }
    
        // 别名处理函数
        function alias(
          record: RouteRecord,
          location: Location,
          matchAs: string
        ): Route {
          ...
        }
    
        // 路由信息生成函数
        function _createRoute(
          record: ?RouteRecord,
          location: Location,
          redirectedFrom?: Location
        ): Route {
          ...
        }
    
        return match;
      }
    
    

    createRouteMap

    • 首先创建 name、path 映射对象
    • 对路由表内部每一项进行处理
    • 最终返回包含 路径/名称的映射表
    /**
     * 创建路由映射表
     *
     * @export
     * @param {Array<RouteConfig>} routes
     * @returns {{
     *   pathMap: Dictionary<RouteRecord>,
     *   nameMap: Dictionary<RouteRecord>
     * }}
     */
    export function createRouteMap(
      routes: Array<RouteConfig>
    ): {
      pathMap: Dictionary<RouteRecord>,
      nameMap: Dictionary<RouteRecord>
    } {
      const pathMap: Dictionary<RouteRecord> = Object.create(null);
      const nameMap: Dictionary<RouteRecord> = Object.create(null);
    
      // 对路由表内部每一项进行处理
      routes.forEach(route => {
        addRouteRecord(pathMap, nameMap, route);
      });
    
      return {
        pathMap,
        nameMap
      };
    }
    

    addRouteRecord

    /**
     * 添加路由记录
     *
     * @param {Dictionary<RouteRecord>} pathMap 路径映射表
     * @param {Dictionary<RouteRecord>} nameMap 名称映射表
     * @param {RouteConfig} route 路由项
     * @param {RouteRecord} [parent] 父路由项
     * @param {string} [matchAs]
     */
    function addRouteRecord(
      pathMap: Dictionary<RouteRecord>,
      nameMap: Dictionary<RouteRecord>,
      route: RouteConfig,
      parent?: RouteRecord,
      matchAs?: string
    ) {
      // 解构路径和名称,若路径不存在,则抛出异常
      const { path, name } = route;
      assert(path != null, `在路由配置中需要“path”。`);
    
      // 定义路由记录构建选项
      const record: RouteRecord = {
        path: normalizePath(path, parent), // 规范化之后的路径
        components: route.components || { default: route.component }, // 路由组件
        instances: {},
        name, // 路由的名称
        parent, // 父路由
        matchAs,
        redirect: route.redirect, // 重定向
        beforeEnter: route.beforeEnter, // 进入前钩子函数,形如:(to: Route, from: Route, next: Function) => void;
        meta: route.meta || {} // 路由元信息
      };
    
      // 是否存在嵌套路由
      if (route.children) {
        // 如果路由已命名并具有默认子路由,则发出警告。
        // 如果用户按名称导航到此路由,则不会呈现默认的子节点(GH问题#629)。
        if (process.env.NODE_ENV !== 'production') {
          if (
            route.name &&
            route.children.some(child => /^\/?$/.test(child.path)) // 匹配空字符串
          ) {
            warn(
              false,
              `命名路由'${route.name}'有一个默认的子路由。
                当导航到这个命名路由(:to="{name: '${
                  route.name
                }'")时,将不会呈现默认的子路由。
                从此路由中删除该名称,并使用已命名链接的默认子路由的名称。`
            );
          }
        }
        // 若存在子路由,递归处理子路由表
        route.children.forEach(child => {
          addRouteRecord(pathMap, nameMap, child, record);
        });
      }
    
      // 是否存在别名配置 string | Array<string>
      if (route.alias) {
        // 处理数组情况
        if (Array.isArray(route.alias)) {
          // 递归处理别名配置项
          route.alias.forEach(alias => {
            addRouteRecord(
              pathMap,
              nameMap,
              { path: alias },
              parent,
              record.path
            );
          });
        } else {
          addRouteRecord(
            pathMap,
            nameMap,
            { path: route.alias },
            parent,
            record.path
          );
        }
      }
    
      // 分别项路径,名称映射表里新增记录
      pathMap[record.path] = record;
      if (name) nameMap[name] = record;
    }
    
    /**
     * 规范化路径
     *
     * @param {string} path
     * @param {RouteRecord} [parent]
     * @returns {string}
     */
    function normalizePath(path: string, parent?: RouteRecord): string {
      path = path.replace(/\/$/, ''); // 替换字符结尾为'/' => '' 如:'/foo/' => '/foo'
      if (path[0] === '/') return path;
      if (parent == null) return path;
      return cleanPath(`${parent.path}/${path}`); // 替换 '//' => '/' 如:'router//foo//' => 'router/foo/'
    }
    
    • 上述代码主要对路由配置的每一项进行处理,最终写入相应的路径,名称映射表。

    • 上述基础示例代码路由配置项处理之后为:

        pathMap:{
          '': {
            beforeEnter: undefined,
            components: {
              default: { template: "<div>home</div>" },
              __proto__: Object
            },
            instances: {},
            matchAs: undefined,
            meta: {},
            name: undefined,
            parent: undefined,
            path: "",
            redirect: undefined,
            __proto__: Object,
          },
          '/bar': {
            beforeEnter: undefined,
            components: {
              default: {template: "<div>bar</div>"},
              __proto__: Object
            },
            instances: {},
            matchAs: undefined,
            meta: {},
            name: undefined,
            parent: undefined,
            path: "/bar",
            redirect: undefined,
            __proto__: Object
          },
          '/bar/child': {
            beforeEnter: undefined,
            components: {
              default: {template: "<div>Child</div>"},
              __proto__: Object
            },
            instances: {},
            matchAs: undefined,
            meta: {},
            name: undefined,
            parent: {path: "/bar", ... },
            path: "/bar/child",
            redirect: undefined,
            __proto__: Object
          },
          '/foo': {
            beforeEnter: undefined,
            components: {
              default: {template: "<div>foo</div>"},
              __proto__: Object
            },
            instances: {},
            matchAs: undefined,
            meta: {},
            name: undefined,
            parent: undefined,
            path: "/foo",
            redirect: undefined,
            __proto__: Object
          }
        }
      
        nameMap:{}
      
      

    知道了 const { pathMap, nameMap } = createRouteMap(routes); 解构的实现及结果,咱们继续看 match 的代码实现

    function match(
      raw: RawLocation,
      currentRoute?: Route,
      redirectedFrom?: Location
    ): Route {
      const location = normalizeLocation(raw, currentRoute);
      const { name } = location;
    
      if (name) {
        // 若存在名称,从名称映射表中取对应记录
        const record = nameMap[name];
        if (record) {
          // 处理路径
          location.path = fillParams(
            record.path,
            location.params,
            `named route "${name}"`
          );
          return _createRoute(record, location, redirectedFrom);
        }
      } else if (location.path) {
        location.params = {};
        for (const path in pathMap) {
          if (matchRoute(path, location.params, location.path)) {
            return _createRoute(pathMap[path], location, redirectedFrom);
          }
        }
      }
      // 没有匹配直接传入 null。
      return _createRoute(null, location);
    }
    
    • 规范化目标路由的链接

      normalizeLocation 代码实现

      normalizeLocation

      /**
       * 规范化目标路由的链接
       *
       * @export
       * @param {RawLocation} raw 目标路由的链接
       * @param {Route} [current] 当前路由
       * @param {boolean} [append] 是否在当前 (相对) 路径前添加基路径
       * @returns {Location}
       */
      export function normalizeLocation(
        raw: RawLocation,
        current?: Route,
        append?: boolean
      ): Location {
        // 处理目标路由的链接(to),我们知道其支持多种写法
        // 'home'
        // { path: 'home' }
        // { path: `/user/${userId}` }
        // { name: 'user', params: { userId: 123 }}
        // { path: 'register', query: { plan: 'private' }}
        const next: Location = typeof raw === 'string' ? { path: raw } : raw;
        // 若已经被规范化或存在name属性直接返回 next
        if (next.name || next._normalized) {
          return next;
        }
        // 解析路径 返回 { path, query, hash }
        const parsedPath = parsePath(next.path || '');
        // current.path - 字符串,对应当前路由的路径,总是解析为绝对路径
        const basePath = (current && current.path) || '/';
        // 获取最终路径地址
        const path = parsedPath.path
          ? resolvePath(parsedPath.path, basePath, append)
          : (current && current.path) || '/';
        // 获取查询参数
        const query = resolveQuery(parsedPath.query, next.query);
        // 当前路由的 hash 值 (带 #) ,如果没有 hash 值,则为空字符串
        let hash = next.hash || parsedPath.hash;
        if (hash && hash.charAt(0) !== '#') {
          hash = `#${hash}`;
        }
      
        return {
          _normalized: true,
          path,
          query,
          hash
        };
      }
      
      • normalizeLocation 所涉及的函数调用的代码实现

        parsePath 代码实现

        解析路径

        /**
         * 解析路径
         *
         * @export
         * @param {string} path
         * @returns {{
         *   path: string;
         *   query: string;
         *   hash: string;
         * }}
         */
        export function parsePath(
          path: string
        ): {
          path: string,
          query: string,
          hash: string
        } {
          let hash = '';
          let query = '';
        
          // 是否存在 #
          const hashIndex = path.indexOf('#');
          if (hashIndex >= 0) {
            hash = path.slice(hashIndex); // 截取 hash 值
            path = path.slice(0, hashIndex); // 截取路径
          }
        
          // 是否存在查询参数
          const queryIndex = path.indexOf('?');
          if (queryIndex >= 0) {
            query = path.slice(queryIndex + 1); // 截取参数
            path = path.slice(0, queryIndex); // 截取路径
          }
        
          return {
            path,
            query,
            hash
          };
        }
        
        resolvePath 代码实现

        导出处理之后的路径地址

        /**
         * 导出处理之后的路径地址
         *
         * @export
         * @param {string} relative 相对路径
         * @param {string} base 基础路径
         * @param {boolean} [append] 是否在当前 (相对) 路径前添加基路径
         * @returns {string}
         */
        export function resolvePath(
          relative: string,
          base: string,
          append?: boolean
        ): string {
          if (relative.charAt(0) === '/') {
            return relative;
          }
        
          if (relative.charAt(0) === '?' || relative.charAt(0) === '#') {
            return base + relative;
          }
        
          // '/vue-router/releases' => ["", "vue-router", "releases"]
          const stack = base.split('/');
        
          // 删除后段
          // - 没有附加
          // - 附加到尾随斜杠(最后一段为空)
          if (!append || !stack[stack.length - 1]) {
            stack.pop();
          }
        
          // resolve 相对路径
          // '/vue-router/releases'.replace(/^\//, '') => "vue-router/releases"
          // 'vue-router/releases'.split('/') => ["vue-router", "releases"]
          const segments = relative.replace(/^\//, '').split('/');
          for (let i = 0; i < segments.length; i++) {
            const segment = segments[i];
            if (segment === '.') {
              continue;
            } else if (segment === '..') {
              stack.pop();
            } else {
              stack.push(segment);
            }
          }
        
          // 确保领先的削减 ensure leading slash
          if (stack[0] !== '') {
            stack.unshift('');
          }
        
          return stack.join('/');
        }
        
        resolveQuery 代码实现

        导出处理之后的路径地址

        /**
         * 导出查询参数
         *
         * @export
         * @param {?string} query
         * @param {Dictionary<string>} [extraQuery={}]
         * @returns {Dictionary<string>}
         */
        export function resolveQuery(
          query: ?string,
          extraQuery: Dictionary<string> = {}
        ): Dictionary<string> {
          if (query) {
            let parsedQuery;
            try {
              parsedQuery = parseQuery(query);
            } catch (e) {
              warn(false, e.message);
              parsedQuery = {};
            }
            for (const key in extraQuery) {
              parsedQuery[key] = extraQuery[key];
            }
            return parsedQuery;
          } else {
            return extraQuery;
          }
        }
        
        /**
         * 解析查询参数
         *
         * @param {string} query
         * @returns {Dictionary<string>}
         */
        function parseQuery(query: string): Dictionary<string> {
          const res = Object.create(null);
        
          // 匹配 ?、#、& 开头的字符串 如:'?id=1'.match(/^(\?|#|&)/) => ["?", "?", index: 0, input: "?id=1", groups: undefined]
          // '?id=1&name=cllemon'.replace(/^(\?|#|&)/, '') => id=1&name=cllemon
          query = query.trim().replace(/^(\?|#|&)/, '');
        
          if (!query) {
            return res;
          }
        
          // 如上例: => ["id=1", "name=cllemon"]
          query.split('&').forEach(param => {
            // 匹配 ”+“
            // 如上例:"id=1" => ["id", "1"]
            const parts = param.replace(/\+/g, ' ').split('=');
            // 如上例:["id", "1"] => 'id'
            // 解码由 decode 等于 decodeURIComponent() 方法用于 encodeURIComponent 方法或者其它类似方法编码的部分统一资源标识符(URI)。
            const key = decode(parts.shift());
            // 如上例:["1"]
            const val = parts.length > 0 ? decode(parts.join('=')) : null;
        
            if (res[key] === undefined) {
              res[key] = val;
            } else if (Array.isArray(res[key])) {
              res[key].push(val);
            } else {
              res[key] = [res[key], val];
            }
          });
        
          return res;
        }
        
    • fillParams 填充参数

      const regexpCompileCache: {
        [key: string]: Function
      } = Object.create(null);
      
      /**
       * 填充参数
       *
       * @param {string} path
       * @param {?Object} params
       * @param {string} routeMsg
       * @returns {string}
       */
      function fillParams(
        path: string,
        params: ?Object,
        routeMsg: string
      ): string {
        try {
          // 第三方库 path-to-regexp: 将路径字符串(例如`/user/:name`)转换为正则表达式
          // compile : 用于将字符串转换为有效路径。
          // 如: const toPath = Regexp.compile('/user/:id')
          //     toPath({ id: 123 }) //=> "/user/123"
          const filler =
            regexpCompileCache[path] ||
            (regexpCompileCache[path] = Regexp.compile(path));
          return filler(params || {}, { pretty: true });
        } catch (e) {
          assert(false, `missing param for ${routeMsg}: ${e.message}`);
          return '';
        }
      }
      
    • _createRoute 根据不同的配置项信息调用不同的路由创建处理函数

      function _createRoute(
        record: ?RouteRecord,
        location: Location,
        redirectedFrom?: Location
      ): Route {
        // 重定向处理函数
        if (record && record.redirect) {
          return redirect(record, redirectedFrom || location);
        }
        // 别名处理处理函数
        if (record && record.matchAs) {
          return alias(record, location, record.matchAs);
        }
        // createRoute 在 “START 代码实现及结果展示” 中以有论述
        return createRoute(record, location, redirectedFrom);
      }
      

最终 route(通过 match 函数返回的值) 值为:

route = {
  fullPath: '/',
  hash: '',
  matched: [
    {
      beforeEnter: undefined,
      components: {
        default: {
          template: '<div>home</div>'
        }
      },
      instances: {},
      matchAs: undefined,
      meta: {},
      name: undefined,
      parent: undefined,
      path: '',
      redirect: undefined
    }
  ],
  meta: {},
  name: undefined,
  params: {},
  path: '/',
  query: {},
  __proto__: Object
};

最终跳转方法 confirmTransition


/**
 * 确认跳转
 *
 * @param {Route} route 目录路由信息
 * @param {Function} cb
 * @memberof History
 */
confirmTransition(route: Route, cb: Function) {
  const current = this.current
  // 是不是相同路由
  if (isSameRoute(route, current)) {
    this.ensureURL()
    return
  }

  const {
    deactivated,
    activated
  } = resolveQueue(this.current.matched, route.matched)

  // 执行队列
  const queue: Array<?NavigationGuard> = [].concat(
    // in-component leave guards
    extractLeaveGuards(deactivated),
    // global before hooks
    this.router.beforeHooks,
    // enter guards beforeEnter: (to, from, next) => {}
    activated.map(m => m.beforeEnter),
    // 异步组件
    resolveAsyncComponents(activated)
  )

  this.pending = route
  // 迭代方法
  const iterator = (hook: NavigationGuard, next) => {
    if (this.pending !== route) return
    // route: 即将要进入的目标 路由对象 current: 当前导航正要离开的路由 next: 调用该方法来 resolve 这个钩子
    hook(route, current, (to: any) => {
      // to === false: 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
      if (to === false) {
        // next(false) -> abort navigation, ensure current URL
        this.ensureURL()
      } else if (typeof to === 'string' || typeof to === 'object') {
        // next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
        // next('/') or next({ path: '/' }) -> redirect
        this.push(to)
      } else {
        // 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
        // 确认转换并传递值
        next(to)
      }
    })
  }
  // 队列执行函数
  runQueue(queue, iterator, () => {
    const postEnterCbs = []
    // 在提取组件内的 enter 守卫之前,请等待异步组件被解析
    runQueue(extractEnterGuards(activated, postEnterCbs), iterator, () => {
      if (this.pending === route) {
        this.pending = null
        cb(route)
        this.router.app.$nextTick(() => {
          postEnterCbs.forEach(cb => cb())
        })
      }
    })
  })
}

  • 到此,路由核心基类已经全部梳理完毕

  • 上述代码逻辑很清晰,有详细的注释,这里直接略过文字描述,上述代码所涉及的函数调用 👇:

    resolveQueue 的代码实现
    /**
     * 比对当前路由和目标路由,导出失活和激活路由信息
     *
     * @param {Array<RouteRecord>} current
     * @param {Array<RouteRecord>} next
     * @returns {{
     *   activated: Array<RouteRecord>,
     *   deactivated: Array<RouteRecord>
     * }}
     */
    function resolveQueue(
      current: Array<RouteRecord>,
      next: Array<RouteRecord>
    ): {
      activated: Array<RouteRecord>,
      deactivated: Array<RouteRecord>
    } {
      let i;
      const max = Math.max(current.length, next.length);
      for (i = 0; i < max; i++) {
        if (current[i] !== next[i]) {
          break;
        }
      }
      return {
        activated: next.slice(i),
        deactivated: current.slice(i)
      };
    }
    
    extractLeaveGuards 的代码实现
    /**
     * 提取离开的路由对象
     *
     * @param {Array<RouteRecord>} matched
     * @returns {Array<?Function>}
     */
    function extractLeaveGuards(matched: Array<RouteRecord>): Array<?Function> {
      // 返回反转之后的数组元素
      return flatMapComponents(matched, (def, instance) => {
        // 提取匹配路由的组件路由守卫钩子函数
        const guard = def && def.beforeRouteLeave;
        if (guard) {
          return function routeLeaveGuard() {
            return guard.apply(instance, arguments);
          };
        }
      }).reverse();
    }
    
    resolveAsyncComponents 的代码实现
    /**
     * 加载异步组件
     *
     * @param {Array<RouteRecord>} matched
     * @returns {Array<?Function>}
     */
    function resolveAsyncComponents(
      matched: Array<RouteRecord>
    ): Array<?Function> {
      return flatMapComponents(matched, (def, _, match, key) => {
        // 如果它是一个函数并且没有附加 Vue 选项,
        // 那么假设它是一个异步组件解析函数
        // 我们没有使用 Vue 的默认异步解析机制
        // 因为我们希望在解析传入组件之前停止导航。
        if (typeof def === 'function' && !def.options) {
          return (to, from, next) => {
            const resolve = resolvedDef => {
              match.components[key] = resolvedDef;
              next();
            };
    
            const reject = reason => {
              warn(false, `Failed to resolve async component ${key}: ${reason}`);
              next(false);
            };
    
            const res = def(resolve, reject);
            if (res && typeof res.then === 'function') {
              res.then(resolve, reject);
            }
          };
        }
      });
    }
    
    runQueue 的代码实现
    /**
     * 执行对列
     *
     * @export
     * @param {Array<?NavigationGuard>} queue
     * @param {Function} fn
     * @param {Function} cb
     */
    export function runQueue(
      queue: Array<?NavigationGuard>,
      fn: Function,
      cb: Function
    ) {
      const step = index => {
        if (index >= queue.length) {
          cb();
        } else {
          if (queue[index]) {
            fn(queue[index], () => {
              step(index + 1);
            });
          } else {
            step(index + 1);
          }
        }
      };
      step(0);
    }
    
    extractEnterGuards 的代码实现
    /**
     * 提取进入的路由对象
     *
     * @param {Array<RouteRecord>} matched
     * @param {Array<Function>} cbs
     * @returns {Array<?Function>}
     */
    function extractEnterGuards(
      matched: Array<RouteRecord>,
      cbs: Array<Function>
    ): Array<?Function> {
      return flatMapComponents(matched, (def, _, match, key) => {
        // 提取组件内的守卫
        // 如:beforeRouteEnter (to, from, next) {}
        // 在渲染该组件的对应路由被 confirm 前调用,  不!能!获取组件实例 `this`, 因为当守卫执行前,组件实例还没被创建.
        const guard = def && def.beforeRouteEnter;
        if (guard) {
          return function routeEnterGuard(to, from, next) {
            // 不过,你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。
            // 如:next(vm => { // 通过 `vm` 访问组件实例 })
            return guard(to, from, cb => {
              next(cb);
              if (typeof cb === 'function') {
                cbs.push(() => {
                  cb(match.instances[key]);
                });
              }
            });
          };
        }
      });
    }
    
/**
  * 导航到不同的 location 向 history 栈添加一个新的记录
  *
  * @param {RawLocation} location
  * @memberof HTML5History
  */
  push(location: RawLocation) {
    // 拿到当前路由对象
    const current = this.current
    // 调用跳转核心方法
    this.transitionTo(location, route => {
      pushState(cleanPath(this.base + route.fullPath))
      this.handleScroll(route, current, false)
    })
  }
  • 最后我们以路由实例的跳转方法(push)来梳理一下路由跳转的过程:

    • 首先拿到当前路由信息。

    • 调用 History 提供的 transitionTo 过渡跳转的方法,传入要跳转的路径信息 location (由上文分析,此处是一个经过规范化之后的路径信息),以及一个参数为路由信息的回调函数(主要用来更新浏览器 URL 和处理用户滚动行为的方法「前文已分析」)。

    • transitionTo 方法上拿到目标路径匹配的路由信息,调用 confirmTransition 并传入匹配路由信息及一个回调函数,该回调函数主要做:调用 updateRoute 更新路由,执行 transitionTo 内传入的回调,以及更新 URL。

    • confirmTransition 内首先过滤掉相同路由;然后调用 resolveQueue 方法传入当前路由匹配信息及目标路由匹配信息解构出 deactivated, activated ; 然后构造执行队列(处理全局钩子函数,异步组件解析等);然后定义执行方法;最后执行队列执行函数(具体实现看上述代码解析)。最终在队列内执行 transitionTo 传入的回调,更新路由,执行监听函数:更新 URL;更新 vue 根实例的 _route 属性,由值的改变,进而触发视图的重新渲染 在 中拿到匹配的路由对象,渲染匹配到的路由组件。完成跳转。

注册的两个全局组件:<router-view><router-link>

<router-view>

  • <router-view> 组件是一个 functional 组件,渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>,根据嵌套路径,渲染嵌套组件。
  • Props: 默认值: "default"; 如果 <router-view> 设置了名称,则会渲染对应的路由配置中 components 下的相应组件。
export default {
  name: 'router-view',

  functional: true, // functional 组件

  props: {
    // 用于匹配渲染对应的路由配置中 components 下的相应组件
    name: {
      type: String,
      default: 'default'
    }
  },

  render(h, { props, children, parent, data }) {
    data.routerView = true;

    const route = parent.$route;
    const cache = parent._routerViewCache || (parent._routerViewCache = {});
    let depth = 0;
    let inactive = false; // 是否失活

    // 循环寻找父节点,找到当前组件嵌套深度
    while (parent) {
      if (parent.$vnode && parent.$vnode.data.routerView) {
        depth++;
      }
      // 处理 keep-alive _inactive vue 内部属性
      if (parent._inactive) {
        inactive = true;
      }
      parent = parent.$parent;
    }

    // 设置当前 router-view 所属层级
    data.routerViewDepth = depth;
    // 获取对应层级的匹配项
    const matched = route.matched[depth];
    // 若不存在,直接渲染为空
    if (!matched) {
      return h();
    }

    // 若失活,直接从缓存中取
    const component = inactive
      ? cache[props.name]
      : (cache[props.name] = matched.components[props.name]);

    // keep-alive 非失活组件,
    if (!inactive) {
      // 添加钩子函数,更新匹配的组件实例
      (data.hook || (data.hook = {})).init = vnode => {
        debugger;
        matched.instances[props.name] = vnode.child;
      };
    }

    return h(component, data, children);
  }
};

<router-link>

  • <router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址,默认渲染成带有正确链接的 <a> 标签,可以通过配置 tag 属性生成别的标签。
  • <router-link> 比起写死的 <a href="..."> 会好一些。
  • 更多参阅 vue-router 文档。
/* @flow */

import { cleanPath } from '../util/path';
import { createRoute, isSameRoute, isIncludedRoute } from '../util/route';
import { normalizeLocation } from '../util/location';

// 解决奇怪的 flow bug
const toTypes: Array<Function> = [String, Object];

export default {
  name: 'router-link',
  props: {
    // 目标路由的链接
    to: {
      type: toTypes,
      required: true
    },
    // 标签名称
    tag: {
      type: String,
      default: 'a'
    },
    // 是否激活
    exact: Boolean,
    // 是否在当前 (相对) 路径前添加基路径 如:/a => /b (true:/a/b; false: /b)
    append: Boolean,
    // true: 当点击时,会调用 router.replace() 而不是 router.push() 不会留下 history 记录
    replace: Boolean,
    // 链接激活时使用的 CSS 类名
    activeClass: String
  },

  render(h: Function) {
    const router = this.$router;
    const current = this.$route;
    // 规范化 目标路由的链接
    const to = normalizeLocation(this.to, current, this.append);
    const resolved = router.match(to);
    const fullPath = resolved.redirectedFrom || resolved.fullPath;
    const base = router.history.base;
    const href = base ? cleanPath(base + fullPath) : fullPath;
    const classes = {};
    const activeClass =
      this.activeClass ||
      router.options.linkActiveClass ||
      'router-link-active';
    const compareTarget = to.path ? createRoute(null, to) : resolved;
    classes[activeClass] = this.exact
      ? isSameRoute(current, compareTarget)
      : isIncludedRoute(current, compareTarget);

    const on = {
      click: e => {
        // 阻止浏览器默认行为 防止a跳转
        e.preventDefault();
        if (this.replace) {
          router.replace(to);
        } else {
          router.push(to);
        }
      }
    };

    const data: any = {
      class: classes
    };

    if (this.tag === 'a') {
      data.on = on;
      data.attrs = { href };
    } else {
      // find the first <a> child and apply listener and href
      const a = findAnchor(this.$slots.default);
      if (a) {
        const aData = a.data || (a.data = {});
        aData.on = on;
        const aAttrs = aData.attrs || (aData.attrs = {});
        aAttrs.href = href;
      }
    }

    return h(this.tag, data, this.$slots.default);
  }
};

function findAnchor(children) {
  if (children) {
    let child;
    for (let i = 0; i < children.length; i++) {
      child = children[i];
      if (child.tag === 'a') {
        return child;
      }
      if (child.children && (child = findAnchor(child.children))) {
        return child;
      }
    }
  }
}

结语

最后的最后,HashAbstract 两种模式都是依托于 History 基类去实现,这里就不做深入分析了。 若对此感兴趣请参阅 vue-router

更多细节部分,建议直接把 vue-router 项目拉下来,本地跑起来,根据 vue-router 提供的用例分析,一定收获满满。

参阅