解释 Vue Router 源码中路由匹配算法的实现，包括权重计算和路径解析的细节。

各位靓仔靓女，今天咱们不开车，聊聊 Vue Router 的“红娘”算法，也就是它怎么给 URL 找对象的。保证听完，下次面试官问你源码，你能给他讲得明明白白，让他怀疑人生。

一、路由匹配：URL 的“相亲大会”

想象一下，你的 Vue 应用是个大型相亲网站，每个路由配置都是一位待嫁（或待娶）的佳人，而 URL 就像一位前来寻爱的用户。Vue Router 的任务，就是在这个相亲大会上，找到最适合 URL 的路由。

这个过程，主要分为两步：

1. 路径解析 (Path Parsing): 了解“用户”的背景信息（URL 结构）。
2. 权重计算 (Ranking): 衡量每个“佳人”与“用户”的匹配度。

二、路径解析：了解“用户”的背景信息

在相亲之前，总得先了解一下对方的基本情况吧？路径解析就是干这个的。它把 URL 拆解成不同的部分，方便后续的匹配。

我们来模拟一下这个过程：

function parsePath(path) {
  const segments = path.split('/').filter(segment => segment !== ''); // 拆分路径，去除空字符串

  const params = {};
  const query = {}; // 假设这里没有处理 query 参数，实际情况会更复杂

  return {
    segments,
    params,
    query,
    path // 原始路径
  };
}

// 示例
const path = '/users/123/profile?name=John';
const parsedPath = parsePath(path);

console.log(parsedPath);
/*
输出:
{
  segments: [ 'users', '123', 'profile' ],
  params: {},
  query: {},
  path: '/users/123/profile?name=John'
}
*/

这段代码只是个简化版，实际的 Vue Router 源码会处理更复杂的情况，比如：

• Hash 模式： 处理 # 符号后面的内容。
• Query 参数： 将 ?name=John&age=30 解析成 { name: 'John', age: '30' }。
• 编码问题： 处理 URL 中的特殊字符编码。

三、权重计算：给“佳人”打分

了解了 URL 的基本信息后，就要开始衡量每个路由配置和 URL 的匹配度了。Vue Router 使用“权重”来表示匹配度，权重越高，说明越匹配。

路由配置的权重主要由以下几个因素决定：

1. 静态路径 (Static Path): 完全匹配的路径，比如 /users。
2. 动态路径 (Dynamic Path): 带有参数的路径，比如 /users/:id。
3. 通配符路径 (Wildcard Path): 可以匹配任意路径的路径，比如 /users/*。

权重计算的原则是：

• 静态路径 > 动态路径 > 通配符路径
• 静态路径长度越长，权重越高。
• 动态路径的参数数量越多，权重越高。

我们来模拟一下权重计算的过程：

function calculateRouteScore(route, pathSegments) {
  let score = 0;

  const routeSegments = route.path.split('/').filter(segment => segment !== '');

  for (let i = 0; i < Math.max(routeSegments.length, pathSegments.length); i++) {
    const routeSegment = routeSegments[i];
    const pathSegment = pathSegments[i];

    if (routeSegment === pathSegment) {
      score += 10; // 完全匹配，加 10 分
    } else if (routeSegment && routeSegment.startsWith(':')) {
      score += 5; // 动态参数，加 5 分
    } else if (routeSegment === '*') {
      score += 1; // 通配符，加 1 分
      break; // 通配符匹配之后，后面的路径不再比较
    } else {
      return -1; // 不匹配，直接返回 -1
    }
  }

  return score;
}

// 示例
const routes = [
  { path: '/users' },
  { path: '/users/:id' },
  { path: '/users/profile' },
  { path: '/users/*' },
  { path: '/' }
];

const path = '/users/123';
const pathSegments = parsePath(path).segments;

const scores = routes.map(route => {
  const score = calculateRouteScore(route, pathSegments);
  return { route, score };
});

console.log(scores);

/*
输出 (大致):
[
  { route: { path: '/users' }, score: 10 },
  { route: { path: '/users/:id' }, score: 15 },
  { route: { path: '/users/profile' }, score: -1 },
  { route: { path: '/users/*' }, score: 11 },
  { route: { path: '/' }, score: -1 }
]
*/

在这个例子中，/users/:id 的得分最高（15 分），因为它既匹配了 /users，又匹配了一个动态参数 :id。

四、源码剖析：Vue Router 的“红娘”算法

上面的代码只是个简化版，真正的 Vue Router 源码要复杂得多。

1. createRouteMap 函数：构建路由映射表

createRouteMap 函数负责将路由配置转换成一个方便查找的路由映射表。 这个表，可以理解为一个路由的“户口本”，方便快速查找。 它处理了以下逻辑：

• 扁平化路由配置： 将嵌套的路由配置（比如 children 属性）扁平化。
• 规范化路由路径： 将相对路径转换成绝对路径。
• 创建路由记录 (Route Record): 为每个路由配置创建一个路由记录，包含路径、组件、参数等信息。
• 维护 pathList 和 pathMap: pathList 是一个包含所有路由路径的数组，用于按顺序匹配； pathMap 是一个以路径为键，路由记录为值的对象，用于快速查找。

2. matchRoute 函数：核心匹配算法

matchRoute 函数是 Vue Router 的核心匹配算法，它负责根据 URL 找到对应的路由记录。 它的主要逻辑如下：

• 遍历 pathList: 按照 pathList 中的顺序，依次尝试匹配每个路由。
• compileRouteRegex 函数: 将路由路径转换成正则表达式。 例如，/users/:id 会被转换成类似 /^/users/([^/]+)$/ 的正则表达式。
• 正则表达式匹配: 使用正则表达式匹配 URL。
• 提取参数: 如果匹配成功，从 URL 中提取参数，并将其添加到路由记录的 params 属性中。
• 计算权重: 如果匹配成功，计算路由的权重。权重计算的逻辑与我们上面模拟的类似，但更加复杂，考虑了更多因素，比如：
  • 静态路径的长度。
  • 动态参数的数量。
  • 是否是可选参数。
  • 是否是通配符。
• 选择最佳匹配: 如果找到多个匹配的路由，选择权重最高的那个。

代码示例（简化版）：

// 假设已经有了 createRouteMap 函数创建好的 pathList 和 pathMap

function matchRoute(path, pathList, pathMap) {
  let matchedRoute = null;
  let bestScore = -1;

  for (const routePath of pathList) {
    const routeRecord = pathMap[routePath];
    const regex = compileRouteRegex(routePath); // 将路径转换为正则表达式
    const match = regex.exec(path);

    if (match) {
      const params = {};
      // 从 match 中提取参数 (这里省略了具体实现)
      // ...

      const score = calculateRouteScore(routeRecord, path); // 计算权重

      if (score > bestScore) {
        bestScore = score;
        matchedRoute = {
          route: routeRecord,
          params: params,
          path: path // 原始路径
        };
      }
    }
  }

  return matchedRoute;
}

function compileRouteRegex(path) {
  // 简化版，实际情况会更复杂
  const paramNames = [];
  let regexString = path.replace(/:w+/g, match => {
    paramNames.push(match.slice(1));
    return '([^/]+)';
  });
  regexString = `^${regexString}$`;
  return new RegExp(regexString);
}

// 示例
const routesConfig = [
  { path: '/users' },
  { path: '/users/:id' }
];

const { pathList, pathMap } = createRouteMap(routesConfig);

const path = '/users/123';
const matchedRoute = matchRoute(path, pathList, pathMap);

console.log(matchedRoute);

/*
输出 (大致):
{
  route: { path: '/users/:id', ... },
  params: { id: '123' },
  path: '/users/123'
}
*/

五、一些重要的细节

• 路由缓存: Vue Router 会缓存已经匹配过的路由，避免重复计算。
• 导航守卫: 在路由匹配前后，可以执行一些导航守卫函数，比如 beforeEach、beforeRouteEnter 等。这些函数可以用来进行权限验证、数据预取等操作。
• normalizeLocation 函数: 这个函数负责规范化 URL，处理一些特殊情况，比如：
  • 相对路径。
  • URL 中的 .. 和 .。
  • URL 中的重复斜杠。

六、表格总结：权重计算的“鄙视链”

权重因素	描述	分值 (示例)
静态路径	完全匹配的路径，比如 /users。	10 + 路径长度
动态路径	带有参数的路径，比如 /users/:id。	5
可选参数	带有可选参数的路径，比如 /users/:id?。	3
通配符路径	可以匹配任意路径的路径，比如 /users/*。	1
路径长度	路径越长，权重越高 (仅限静态路径)。
参数数量	动态参数越多，权重越高。
匹配优先级	静态路径 > 动态路径 > 通配符路径。
路由定义顺序	如果权重相同，则按照路由定义的顺序进行匹配 (先定义的优先级更高)。

七、总结：Vue Router 的“爱情观”

Vue Router 的路由匹配算法，就像一个精密的“红娘”，它会综合考虑 URL 的各个方面，然后找到最适合的路由。 它遵循“门当户对”的原则（静态路径优先），也懂得“日久生情”（路径长度影响权重），还会给“潜力股”（动态参数）更多的机会。

理解了这些，下次再遇到复杂的路由配置，你就不会一脸懵逼了。 而且，面试的时候，你也可以自信地向面试官展示你的“爱情观”，让他对你刮目相看。

记住，源码就像一本武功秘籍，只有真正理解了它的原理，才能练成绝世神功。 希望今天的讲解能帮助你更好地理解 Vue Router 的源码，成为一名真正的 Vue 大佬！