vue-router 如何找到路由组件?matcher 总结,vue-router Matcher 解析(四)

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 这篇是 vue-router matcher 系列的总结篇,这里提示一下 matcher 就是 vue-router 中的路由匹配器,负责路由的增删查,当我们进行路由跳转时,是通过 matcher 去匹配到正确路径,然后拿到 component(重定向除外)

这篇是 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 转换为命名视图类型

5.png

别名处理

将增加别名路由,同时更新子路由,采取 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 提供的高级匹配了,根本读不下去,所以我建议正则表达式恐惧症患者慎入,实在是太多太杂了,我看的很懵,如果有大佬愿意去看的话,可以解读分享一下

image.png

顺便补充一下, 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 生成分析
相关文章
|
2月前
|
前端开发 JavaScript
React 步骤条组件 Stepper 深入解析与常见问题
步骤条组件是构建多步骤表单或流程时的有力工具,帮助用户了解进度并导航。本文介绍了在React中实现简单步骤条的方法,包括基本结构、状态管理、样式处理及常见问题解决策略,如状态管理库的使用、自定义Hook的提取和CSS Modules的应用,以确保组件的健壮性和可维护性。
81 17
|
2月前
|
前端开发 UED
React 文本区域组件 Textarea:深入解析与优化
本文介绍了 React 中 Textarea 组件的基础用法、常见问题及优化方法,包括状态绑定、初始值设置、样式自定义、性能优化和跨浏览器兼容性处理,并提供了代码案例。
100 8
|
3月前
|
负载均衡 网络协议 定位技术
在数字化时代,利用DNS实现地理位置路由成为提升用户体验的有效策略
在数字化时代,利用DNS实现地理位置路由成为提升用户体验的有效策略。通过解析用户请求的来源IP地址,DNS服务器可判断其地理位置,并返回最近或最合适的服务器IP,从而优化网络路由,减少延迟,提高访问速度。示例代码展示了如何基于IP地址判断地理位置并分配相应服务器IP,实际应用中需结合专业地理数据库和动态调整机制,以应对复杂网络环境带来的挑战。
63 6
|
3月前
|
前端开发 JavaScript 开发者
揭秘前端高手的秘密武器:深度解析递归组件与动态组件的奥妙,让你代码效率翻倍!
【10月更文挑战第23天】在Web开发中,组件化已成为主流。本文深入探讨了递归组件与动态组件的概念、应用及实现方式。递归组件通过在组件内部调用自身,适用于处理层级结构数据,如菜单和树形控件。动态组件则根据数据变化动态切换组件显示,适用于不同业务逻辑下的组件展示。通过示例,展示了这两种组件的实现方法及其在实际开发中的应用价值。
62 1
|
4月前
|
存储 JavaScript 前端开发
Vue3权限控制全攻略:路由与组件层面的用户角色与权限管理方法深度解析
Vue3权限控制全攻略:路由与组件层面的用户角色与权限管理方法深度解析
447 2
|
3月前
|
机器学习/深度学习 自然语言处理 数据管理
GraphRAG核心组件解析:图结构与检索增强生成
【10月更文挑战第28天】在当今数据科学领域,自然语言处理(NLP)和图数据管理技术的发展日新月异。GraphRAG(Graph Retrieval-Augmented Generation)作为一种结合了图结构和检索增强生成的创新方法,已经在多个应用场景中展现出巨大的潜力。作为一名数据科学家,我对GraphRAG的核心组件进行了深入研究,并在此分享我的理解和实践经验。
135 0
|
3月前
|
监控 Java 应用服务中间件
高级java面试---spring.factories文件的解析源码API机制
【11月更文挑战第20天】Spring Boot是一个用于快速构建基于Spring框架的应用程序的开源框架。它通过自动配置、起步依赖和内嵌服务器等特性,极大地简化了Spring应用的开发和部署过程。本文将深入探讨Spring Boot的背景历史、业务场景、功能点以及底层原理,并通过Java代码手写模拟Spring Boot的启动过程,特别是spring.factories文件的解析源码API机制。
130 2
|
2月前
|
设计模式 存储 安全
【23种设计模式·全精解析 | 创建型模式篇】5种创建型模式的结构概述、实现、优缺点、扩展、使用场景、源码解析
创建型模式的主要关注点是“怎样创建对象?”,它的主要特点是"将对象的创建与使用分离”。这样可以降低系统的耦合度,使用者不需要关注对象的创建细节。创建型模式分为5种:单例模式、工厂方法模式抽象工厂式、原型模式、建造者模式。
【23种设计模式·全精解析 | 创建型模式篇】5种创建型模式的结构概述、实现、优缺点、扩展、使用场景、源码解析
|
2月前
|
存储 设计模式 算法
【23种设计模式·全精解析 | 行为型模式篇】11种行为型模式的结构概述、案例实现、优缺点、扩展对比、使用场景、源码解析
行为型模式用于描述程序在运行时复杂的流程控制,即描述多个类或对象之间怎样相互协作共同完成单个对象都无法单独完成的任务,它涉及算法与对象间职责的分配。行为型模式分为类行为模式和对象行为模式,前者采用继承机制来在类间分派行为,后者采用组合或聚合在对象间分配行为。由于组合关系或聚合关系比继承关系耦合度低,满足“合成复用原则”,所以对象行为模式比类行为模式具有更大的灵活性。 行为型模式分为: • 模板方法模式 • 策略模式 • 命令模式 • 职责链模式 • 状态模式 • 观察者模式 • 中介者模式 • 迭代器模式 • 访问者模式 • 备忘录模式 • 解释器模式
【23种设计模式·全精解析 | 行为型模式篇】11种行为型模式的结构概述、案例实现、优缺点、扩展对比、使用场景、源码解析
|
2月前
|
设计模式 存储 安全
【23种设计模式·全精解析 | 创建型模式篇】5种创建型模式的结构概述、实现、优缺点、扩展、使用场景、源码解析
结构型模式描述如何将类或对象按某种布局组成更大的结构。它分为类结构型模式和对象结构型模式,前者采用继承机制来组织接口和类,后者釆用组合或聚合来组合对象。由于组合关系或聚合关系比继承关系耦合度低,满足“合成复用原则”,所以对象结构型模式比类结构型模式具有更大的灵活性。 结构型模式分为以下 7 种: • 代理模式 • 适配器模式 • 装饰者模式 • 桥接模式 • 外观模式 • 组合模式 • 享元模式
【23种设计模式·全精解析 | 创建型模式篇】5种创建型模式的结构概述、实现、优缺点、扩展、使用场景、源码解析

热门文章

最新文章

推荐镜像

更多