这篇是 vue-router matcher 系列的总结篇，这里提示一下 matcher 是 route 转换后的结构，由多叉树转化为数组形式存放，参考下面的代码结构

// routes
const routes = [
  {
    path: "/a",
  },
  {
    path: "/b",
  },
];
// matchers (简略版)
const matchers = ["/a", "/b"];

matcher 就是 vue-router 中的路由匹配器，负责路由的增删查，当我们进行路由跳转时，是通过 matcher 去匹配到正确路径，然后拿到 component(重定向除外)，所以 matcher 是我们创建 vue-router 实例的第一步，当你发现路由匹配出错了，不正确，跳转到了错误的 component 或者未解析，那么极有可能是 matcher 部分出了问题，而本篇文章将对之前的一、二、三篇做总结，以及对 matcher path 做一些补充

了解 matcher 的定义之后可以参考一下 vue-router 文档下面的内容，和 matcher 有关，带着问题去思考 vue-router 是如何实现的？

1. 路由组件传参
2. 重定向和别名
3. 路由的匹配语法
4. 动态路由匹配
5. 命名路由

路由标准化

前面说过 matcher 是由 route 转化过来的，所以 matcher 生成的操作是由 addRoute 这个函数来完成的，源码参考 router/src/matcher/index.ts 74, 那么 matcher 的第一步就是标准化，也可以说是封装，将易于理解便于编写的 route 转化成易于操作的 RouteRecordNormalized

route 的封装主要是对 props 和 components 做一个封装，会将 route 转换为命名视图类型

别名处理

将增加别名路由，同时更新子路由，采取 N 叉树递归遍历

// 源码
const routes = { path: "/users", alias: "/humans" };
// vue-router 处理后
const normalizedRecords = [{ path: "/users" }, { path: "/humans" }];

注意 original 指的是 alias 上的路由，即上面的 path: "/user" 对于的路由是 original, path: "/humans" 是别名路由，而 children 的父级路由是 parent 不要搞混了

matcher 排名

routes 最终会转换成一个有顺序的数组，为了正确匹配到路由，对待查找的路由出现多种可能匹配结果时，优先返回最匹配的

const routes = [
  {
    path: "/movie/:id",
  },
  {
    path: "/movie/new",
  },
];

insertMatcher(matcher) {
  // 通过比分得到插入位置
  comparePathParserScore() -> compareScoreArray()
  // 根据不同的路由加入两种数据结构
  matchers.splice(i, 0, matcher); // 普通路由
  //
  matcherMap.set(matcher.record.name, matcher) // 命名路由
}

上面是之前三篇文章的内容，接下来就是 matcher 的补充部分，也就是 matcher(最终渲染路由，跳转路由时通过这个去匹配) 的 生成过程 createRouteRecordMatcher

生成 matcher

matcher 核心在于匹配，所以 vue-router 在这上面加入了大量的正则表达式的处理，以便动态路由加上正则表达式能够匹配到正确的路由

而这个 matcher 在生成的过程中一共干了四件事

1. 生成 parse, 分析 path 比如是静态的还是动态的，顺便打分为了之后的排序
2. 合并 record(就是前面说的标准化 route) 和 parse, 合并后就是 matcher 了
3. 如果是子路由，得让父路由持有子路由，拿到子路由的地址
4. 返回 matcher

生成 parse

function createRouteRecordMatcher(
  record: Readonly<RouteRecord>,
  parent: RouteRecordMatcher | undefined,
  options?: PathParserOptions
): RouteRecordMatcher {
  const parser = tokensToParser(tokenizePath(record.path), options);
}

tokenizePath 就是分词器，起到解析整个 path 的作用，然后根据解析出来的 path 去打分，打分上静态(Static)得分要比动态(Dynamic)的要高，这就是为什么 mathcer 排序的时候静态的位置在动态之前，分数可以查看 router/src/matcher/pathParserRanker.ts 92, 里面给出了 path 的得分标准，有点像是参考答案

至于 path 的解析是如何实现的，只能说 vue-router 的这个 matcher 的 path 实在是太搞了，太多了，我本来就不是很会正则表达式，我的路由业务场景也绝大多数都是用静态，甚至连动态匹配都很少用，更不要说 vue-router 提供的高级匹配了，根本读不下去，所以我建议正则表达式恐惧症患者慎入，实在是太多太杂了，我看的很懵，如果有大佬愿意去看的话，可以解读分享一下

顺便补充一下, matcher 的排序机制，路由根据得分来排序，而不同级的路由就会有不同级的得分，比如下面这个例子

const path1 = "/a";
const score1 = [80.7];
const path2 = "/a/b";
const score2 = [80.7, 80.7];

像上面的两个路由，会根据 score 数组遍历比较，一旦有一方遍历完了仍是相等则将认为其顺序更前，如果未遍历完就出现一方数值较大的情况，则认为其顺序更前，比如 [80.7, 80.7, 80.7] 和 [80.7, 60.7]

合并

parse 和 record 合并则是使用 Object.assign(), 这个函数的出镜率实在太高

父路由记载子路由

这个其实还是有必要讲一下的, 查看源码 router/src/matcher/pathMatcher.ts 46

if (parent) {
  if (!matcher.record.aliasOf === !parent.record.aliasOf)
    parent.children.push(matcher);
}

它的意思是在下面两种情况下才可以被父路由记载

1. 父路由是别名路由子路由也是别名路由
2. 父路由不是别名路由子路由也不是别名路由

看文字肯定看不懂，用大家熟知的 route 就能知道了

const routes = [
  {
    path: "/a",
    alias: "/b",
    component: Home,
    children: [{ path: "1", alias: "2", component: Home }],
  },
];
// matchers
const matchers = [
  { path: "/a", children: ["/a/1"] },
  { path: "/b", children: ["/b/1", "/b/2"] },
];

家人可能已经发现了, "/a/2" 既不属于 "/a" 也不属于 "/b", 就是因为它不满足上面的两个条件

matcher 总结

前面说过 addRoute 是生成 matcher 的核心，因此 matcher 部分的总结就用 addRoute 的部分源码加伪代码去总结

function addRoute(
  record: RouteRecordRaw, // 初始 route
  parent?: RouteRecordMatcher,
  originalRecord?: RouteRecordMatcher
) {
  // 标准化 route
  const mainNormalizedRecord = normalizeRouteRecord(record);
  // ...
  // 添加别名路由
  if ("alias" in record) {
  }
  // ...
  // 递归更新子路由, N 叉树遍历
  for (const normalizedRecord of normalizedRecords) {
    // ...
    // 分析 path 生成 matcher，得到路由分数
    matcher = createRouteRecordMatcher(normalizedRecord, parent, options);
    // ...
    if ("children" in mainNormalizedRecord) {
      for (let i = 0; i < children.length; i++) {
        addRoute();
      }
    }
    // ...
    // 插入 matcher 数组，根据路由排名
    insertMatcher(matcher);
  }
  // ...
}

总结

至此 vue-router 的 matcher 源码终于告一段落，其实阅读源码的时候发现 vue-router 的作者在单行的时候不是很喜欢给 if/while/for 这种去加上大括号 {}，但因为 prettier 格式化的原因，所谓的单行其实，不是单行，看起来也不像单行，不知道大家平时习惯加上大括号 {} 吗？

// vue-router 中的源码
if (!tokenIndex)
  subPattern =
    optional && segment.length < 2 
      ? `(?:/${subPattern})`
      : "/" + subPattern;

vue-router matcher 部分就先讲到这里，如果你对 vue-router4 的源码感兴趣的话，觉得文章讲的还行，可以看之后发的几篇源码解析（关注就能看到后续更新, 欢迎点赞催更）, Matcher 部分文章如下

1. vue-router 如何找到待渲染的 vue 组件？vue-router Matcher 解析（一） - 标准化 route
2. vue-router 如何找到待渲染的 vue 组件？详解 route 别名处理，vue-router Matcher 解析（二 - 别名处理
3. vue-router 如何匹配路由？解析路径排名，vue-router Matcher 解析（三） - 路径排名
4. [vue-router 如何找到路由组件？matcher 总结，vue-router Matcher 解析（四）] - matcher 生成分析