解释 Vue Router 源码中路由匹配 (Route Matching) 的实现，包括动态路由参数和嵌套路由的解析。

各位靓仔靓女，晚上好！今天咱们来聊聊 Vue Router 源码中路由匹配那些事儿，保证让你听完之后，感觉自己也能写个 Router 出来。别怕，没那么难，咱们一步一步来，就像剥洋葱一样，一层一层地扒开它的核心。

开场白：路由匹配，你是谁？

路由匹配，简单来说，就是给定一个 URL，Router 要告诉你，这个 URL 对应哪个组件，以及组件需要哪些参数。 就像你去饭店点菜，服务员（Router）根据你点的菜名（URL）告诉你这道菜是什么（组件），里面都有什么配料（参数）。

第一幕：路由表长什么样？

Router 首先得有个路由表，里面记录了所有可能的 URL 和对应的组件。这个路由表通常是一个数组，每个元素是一个路由记录（RouteRecord）。

// 一个简单的路由表的例子
const routes = [
  {
    path: '/', // 根路径
    component: Home
  },
  {
    path: '/about', // 关于页面
    component: About
  },
  {
    path: '/user/:id', // 用户详情页面，带动态参数
    component: User
  }
];

path 是 URL 路径，component 是对应的组件。注意，第三个路由，path: '/user/:id'，这里 :id 就是一个动态参数，表示 URL 中这一部分可以变化。

第二幕：匹配的引擎 – createRouteMatcher

Vue Router 3 使用 createRouteMatcher 来处理路由的匹配。 Vue Router 4 中使用了更模块化的设计，这里为了方便理解，简化并借鉴了 Vue Router 3 的思路。

function createRouteMatcher(routes) {
  const routeRecords = [];

  // 1. 规范化路由记录 (normalizeRouteRecord)
  routes.forEach(route => {
    insertRouteRecord(routeRecords, route);
  });

  // 2. 匹配方法 (match)
  function match(rawLocation) {
    const location = typeof rawLocation === 'string' ? { path: rawLocation } : rawLocation;
    const { path } = location;

    for (let i = 0; i < routeRecords.length; i++) {
      const record = routeRecords[i];
      const match = routeRecordMatcher(record, path);

      if (match) {
        return {
          route: record,
          params: match.params,
          path: match.path
        };
      }
    }

    return null; // 没有匹配到
  }

  return {
    match
  };
}

这个 createRouteMatcher 函数接收路由表 routes 作为参数，并返回一个 match 方法。match 方法接收一个 URL 或一个 Location 对象，然后在路由表中查找匹配的路由记录。

重点来了！

• normalizeRouteRecord (插入路由记录): 这个函数负责将路由表中的每一个路由配置对象转换成一个内部使用的 RouteRecord 对象。 它会处理 path 的规范化，例如确保它以 / 开头，并且处理相对路径，并且构建嵌套路由的父子关系。
• routeRecordMatcher (路由记录匹配): 这个函数是匹配的核心，它负责判断给定的 URL 是否匹配一个特定的 RouteRecord。

第三幕：insertRouteRecord – 路由记录的插入

这个函数负责将路由配置转换成 RouteRecord, 并且处理嵌套路由的逻辑。

function insertRouteRecord(routeRecords, route, parent, path) {
  const normalizedPath = normalizePath(route.path, parent ? parent.path : '');
  const record = {
    path: normalizedPath,
    component: route.component,
    parent: parent,
    children: [],
    regex: pathToRegexp(normalizedPath, [], {}) // 将 path 转换成正则表达式
  };

  if (route.children) {
    route.children.forEach(childRoute => {
      insertRouteRecord(routeRecords, childRoute, record); // 递归处理子路由
    });
  }

  routeRecords.push(record);
}

// 路径规范化
function normalizePath(path, parentPath) {
  if (path.startsWith('/')) {
    return path;
  }

  if (parentPath === undefined) {
    return path;
  }

  const joined = parentPath.replace(//+$/, '') + '/' + path.replace(/^/+/, '');
  return joined;
}

这个函数做了以下几件事：

1. 规范化路径 (normalizePath)： 确保路径的格式正确，比如如果是相对路径，就和父路径拼接起来。
2. 创建 RouteRecord： 创建一个包含路由信息的对象，包括路径、组件、父路由、子路由等。
3. 处理子路由： 如果路由配置中包含 children，就递归调用 insertRouteRecord 处理子路由。
4. 转换成正则表达式(pathToRegexp) 将路由的path转换成正则表达式，方便后续进行匹配。

第四幕：routeRecordMatcher – 匹配的灵魂

这才是真正的匹配引擎，它负责判断一个 URL 是否匹配一个 RouteRecord。

function routeRecordMatcher(record, path) {
  const match = record.regex.exec(path);

  if (!match) {
    return null; // 没有匹配
  }

  const params = {};
  const keys = record.regex.keys; // 从 pathToRegexp 中获取的参数名列表

  for (let i = 1; i < match.length; i++) {
    const key = keys[i - 1];
    if (key) {
      params[key.name] = match[i]; // 提取参数
    }
  }

  return {
    path: match[0], // 匹配到的路径
    params: params
  };
}

这个函数做了以下几件事：

1. 正则表达式匹配： 使用 RouteRecord 中的正则表达式去匹配 URL。
2. 提取参数： 如果匹配成功，就从匹配结果中提取动态参数。

关键点：pathToRegexp

pathToRegexp 是一个第三方库，用于将一个路径字符串转换成正则表达式。 它能处理动态参数、可选参数、重复参数等各种复杂的路径。

// 例子
const pathToRegexp = require('path-to-regexp');
const path = '/user/:id';
const keys = [];
const regex = pathToRegexp(path, keys);

console.log(regex); // /^/user/([^/]+?)/?$/i
console.log(keys);  // [{ name: 'id', ... }]

pathToRegexp 返回一个正则表达式，keys 数组包含了参数名和一些元数据。

第五幕：动态路由参数

动态路由参数是路由匹配的一个重要特性，它允许 URL 的一部分是可变的。例如，/user/:id 中的 :id 就是一个动态参数，它可以是任何值。

在 routeRecordMatcher 函数中，我们通过正则表达式匹配 URL，然后从匹配结果中提取动态参数。pathToRegexp 生成的正则表达式会将动态参数捕获到匹配结果中，然后我们根据 keys 数组中的参数名，将这些值提取出来，放到 params 对象中。

第六幕：嵌套路由

嵌套路由允许你在一个组件内部渲染另一个组件，从而构建更复杂的页面结构。

const routes = [
  {
    path: '/user',
    component: UserLayout,
    children: [
      {
        path: '', // 相当于 /user
        component: UserProfile
      },
      {
        path: 'posts', // 相当于 /user/posts
        component: UserPosts
      }
    ]
  }
];

在这个例子中，/user 路径对应 UserLayout 组件，而 UserLayout 组件内部可以渲染 UserProfile 或 UserPosts 组件。

insertRouteRecord 函数在处理嵌套路由时，会递归调用自身，将子路由添加到父路由的 children 数组中。 同时，子路由的 path 会和父路由的 path 拼接起来，形成完整的路径。

第七幕：匹配的优先级

当多个路由都匹配同一个 URL 时，Router 需要确定哪个路由应该被选中。 Vue Router 使用以下优先级规则：

1. 静态路径优先： 静态路径（不带动态参数的路径）比动态路径优先级高。
2. 路径长度优先： 路径长度越长，优先级越高。
3. 定义顺序优先： 在路由表中，定义在前面的路由优先级高。

这个逻辑体现在 createRouteMatcher 的 match 方法中的循环顺序，以及正则表达式匹配的特性。 先定义的路由会先被匹配，如果匹配成功，就直接返回，不再继续匹配后面的路由。

第八幕：Hash 模式和 History 模式

Vue Router 支持两种模式：Hash 模式和 History 模式。

• Hash 模式： 使用 URL 的 hash 部分（# 符号后面的内容）来模拟完整的 URL，兼容性好，但 URL 不美观。
• History 模式： 使用 HTML5 History API 来实现 URL 的跳转，URL 美观，但需要服务器端配置支持。

这两种模式主要影响的是 URL 的获取和监听方式，以及服务器端的配置。 路由匹配的逻辑在两种模式下是相同的。

第九幕：总结

咱们来总结一下 Vue Router 路由匹配的核心步骤：

1. 构建路由表： 将路由配置转换成内部使用的 RouteRecord 对象，并处理嵌套路由。
2. 规范化路径： 确保路径的格式正确，并处理相对路径。
3. 转换成正则表达式： 使用 pathToRegexp 将路径转换成正则表达式。
4. 匹配 URL： 使用正则表达式去匹配 URL，并提取动态参数。
5. 确定优先级： 当多个路由都匹配同一个 URL 时，根据优先级规则选择最佳匹配。

代码示例：一个简化的 Router 实现

为了更好地理解，我们来实现一个简化的 Router，只包含最核心的路由匹配功能。

class Router {
  constructor(options) {
    this.routes = options.routes;
    this.routeMatcher = createRouteMatcher(this.routes);
    this.currentRoute = null;

    window.addEventListener('hashchange', () => {
      this.handleRouteChange();
    });

    this.handleRouteChange(); // 初始化
  }

  handleRouteChange() {
    const path = window.location.hash.slice(1) || '/'; // 获取 hash 部分
    const matchedRoute = this.routeMatcher.match(path);

    if (matchedRoute) {
      this.currentRoute = matchedRoute;
      // 这里可以触发组件的渲染，将 matchedRoute.route.component 渲染到页面上
      console.log('Matched route:', matchedRoute);
    } else {
      console.log('No route matched for:', path);
    }
  }

  push(path) {
    window.location.hash = path;
  }
}

// 使用
const routes = [
  {
    path: '/',
    component: { template: '<div>Home</div>' }
  },
  {
    path: '/about',
    component: { template: '<div>About</div>' }
  },
  {
    path: '/user/:id',
    component: { template: '<div>User ID: {{ $route.params.id }}</div>' }
  }
];

const router = new Router({ routes });

// 模拟点击事件
// router.push('/about');
// router.push('/user/123');

这个简化的 Router 使用了 Hash 模式，监听 hashchange 事件，并在 URL 改变时调用 handleRouteChange 方法进行路由匹配。 handleRouteChange 方法使用 createRouteMatcher 创建的 routeMatcher 对象，调用 match 方法进行路由匹配，并将匹配结果保存到 currentRoute 属性中。

最后：源码阅读的技巧

阅读 Vue Router 源码，或者任何大型项目的源码，都需要一些技巧：

• 从入口开始： 找到 Router 的入口文件，了解它的初始化过程。
• 分模块阅读： 将 Router 分解成不同的模块，例如路由匹配、导航、History 管理等，分别阅读。
• 画图： 将代码的执行流程画成流程图，帮助理解代码的逻辑。
• 调试： 在代码中添加 console.log 语句，或者使用调试器，观察代码的执行过程。
• 模仿： 尝试自己实现 Router 的一部分功能，加深理解。

希望今天的讲座对你有所帮助！ 路由匹配是 Vue Router 的核心，理解了它的实现，你就能更好地使用 Router，甚至可以自己定制 Router 的行为。 记住，源码阅读不是一蹴而就的，需要耐心和实践。 祝你早日成为 Router 大师！ 拜拜！