VueRouter 源码学习 - 深度剖析两种路由模式的设计精髓

前端

2023-10-28 18:22:49

深入剖析 VueRouter 的路由模式和初始化过程

在单页应用 (SPA) 开发中，VueRouter 是一款备受青睐的路由管理工具，它能提供无缝的页面跳转体验。本文将深入分析 VueRouter 的两种路由模式：哈希模式和历史模式，并探究其初始化过程中的处理逻辑。

两种路由模式的设计

VueRouter 提供两种路由模式，以适应不同的场景需求：

哈希模式

默认模式，使用 URL 中的哈希值进行路由。
优点： 简单易用，兼容性好，不会影响浏览器后退按钮和书签。
缺点： URL 中包含哈希值，可能在某些情况下引发问题（例如服务器端渲染）。

历史模式

使用 URL 中的路径进行路由。
优点： URL 更美观，不会影响服务器端渲染。
缺点： 需要服务器端支持，可能导致浏览器后退按钮和书签出现问题。

父类和子类的继承方法设计

VueRouter 的两种路由模式都继承自一个父类 AbstractHistory，该类提供了诸如 currentRoute、matched 和 transitionTo 等公共方法和属性。

export class AbstractHistory {
  constructor(router, base) {
    this.router = router;
    this.base = normalizeBase(base);
    // ...
  }

  // ...
}

哈希模式和历史模式分别继承自 AbstractHistory，并实现了各自特有的方法和属性。例如，哈希模式实现了 hash 和 pushHash 方法，而历史模式实现了 history 和 pushState 方法。

export class HashHistory extends AbstractHistory {
  constructor(router, base, fallback) {
    super(router, base);
    // ...
  }

  // ...
}

export class History extends AbstractHistory {
  constructor(router, base, fallback) {
    super(router, base);
    // ...
  }

  // ...
}

路由初始化的处理逻辑

VueRouter 的初始化过程在 install 方法中完成，当 Vue.js 的 Vue.use 方法调用 VueRouter 实例时触发。

VueRouter.install = function(Vue) {
  if (VueRouter.installed) return;
  VueRouter.installed = true;

  // ...
};

在 install 方法中，VueRouter 执行一系列初始化操作，包括：

创建路由实例
解析路由配置
初始化路由模式
注册路由组件
挂载路由钩子

其中，初始化路由模式的步骤如下：

根据配置创建路由模式实例。
调用路由模式实例的 transitionTo 方法加载初始路由。
调用路由模式实例的 listen 方法监听 URL 的变化。

export function init(app, opts) {
  // 创建路由实例
  const router = new Router(options);

  // 解析路由配置
  const history = new HTML5History(router, opts.base);

  // 初始化路由模式
  history.transitionTo(history.getCurrentLocation());

  // 注册路由组件
  router.app = app;

  // 挂载路由钩子
  initRouterHooks(router, app);

  // ...
}