vue-router 源码分析——3. 动态路由匹配

这是对vue-router 3 版本的源码分析。
本次分析会按以下方法进行:

  1. 按官网的使用文档顺序,围绕着某一功能点进行分析。这样不仅能学习优秀的项目源码,更能加深对项目的某个功能是如何实现的理解。这个对自己的技能提升,甚至面试时的回答都非常有帮助。
  2. 在围绕某个功能展开讲解时,所有不相干的内容都会暂时去掉,等后续涉及到对应的功能时再加上。这样最大的好处就是能循序渐进地学习,同时也不会被不相干的内容影响。省略的内容都会在代码中以…表示。
  3. 每段代码的开头都会说明它所在的文件目录,方便定位和查阅。如果一个函数内容有多个函数引用,这些都会放在同一个代码块中进行分析,不同路径的内容会在其头部加上所在的文件目录。

本章讲解router中动态路由匹配是如何实现的。
另外我的vuex3源码分析也发布完了,欢迎大家学习:
vuex3 最全面最透彻的源码分析
还有vue-router的源码分析:
vue-router 源码分析——1. 路由匹配
vue-router 源码分析——2. router-link 组件是如何实现导航的
vue-router 源码分析——3. 动态路由匹配

官网中如下的内容是如何实现的

  • 官网示例:
const User = {template: '<div>User</div>'
}const router = new VueRouter({routes: [// 动态路径参数 以冒号开头{ path: '/user/:id', component: User }]
})
  • 动态路由 /user/:id 是如何保证 /user/foo 和 /user/bar 都将映射到相同的路由?
  • 冒号 : 的参数值是如何被 this.$route.params 记录的?
  • 匹配优先级在源码中如何体现?

动态路由匹配

  • 动态路由 /user/:id 是使用了第三方模块 path-to-regexp 实现的正则匹配。这里涉及到了外部模块,所以不做分析,只用知道他使用了 path-to-regexp 就行。
  • 这个正则匹配等于:
 /^/user(?:/([^/#?]+?))[/#?]?$/i
  • 在路由初始化时,会将所有路由的正则匹配加入到record.regex中
// ./create-route-map.js
import Regexp from 'path-to-regexp'
...
function addRouteRecord(...) {const record: RouteRecord = {regex: compileRouteRegex(normalizedPath, pathToRegexpOptions),...}
}function compileRouteRegex(path: string,pathToRegexpOptions: PathToRegexpOptions
): RouteRegExp {const regex = Regexp(path, [], pathToRegexpOptions)// 在传入的 '/user/:id' 中,这里的regex是一个对象,包含正则匹配规则 /^/user(?:/([^/#?]+?))[/#?]?$/i 和所以定义的参数信息的keys数组return regex
}
  • 动态路由 ‘/user/:id’ 匹配到的对应参数,是在匹配过程中,通过记录到location.params中,最后赋值到route.params上的。
  • 如果不是用:冒号,而是用*通配符来匹配的话,就会记录到params.pathMatch中。
// ./create-matcher.js
export function createMatcher(routes: Array<RouteConfig>,router: VueRouter
): Matcher {...function match(raw: RawLocation,currentRoute?: Route,redirectedFrom?: Location): Route {...if (name) {...        } else if (location.path) {location.params = {}for (let i = 0; i < pathList.length; i++) {const path = pathList[i]const record = pathMap[path]// 在 matchRoute 中将动态路由匹配到的参数加入到 location.params 中if (matchRoute(record.regex, location.path, location.params)) {return _createRoute(record, location, redirectedFrom)}}        }}function matchRoute(regex: RouteRegExp,path: string,params: Object    ): boolean {const m = path.match(regex)if (!m) {return false        } else if (!params) {return true        }for (let i = 1, len = m.length; i < len; ++i) {const key = regex.keys[i-1]// '/user/:id' 的keys等于 [{ name: 'id', prefix: '/', suffix: '', pattern: '[^\\/#\\?]+?', modifier: '' }]if (key) {// 如果key没有name属性,就会用pathMatch做params的键,这里对应官网说的通配符*匹配的参数params[key.name || 'pathMatch'] = typeof m[i] === 'string' ? decode(m[i]) : m[i]            }        }return true}
}

匹配优先级

  • 匹配的优先级就按照路由的定义顺序:路由定义得越早,优先级就越高。
  • 在router初始化时,按路由的定义顺序生成了pathList。
  • 在匹配路由的过程中,是遍历pathList进行匹配搜索的,如果匹配到就直接生成route。所以路由定义得越早,优先级越高。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/23682.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jmeter性能分析及调优详解(入门)

一、系统性能理解 如果说需求、开发、DB、运维、测试是单一一门学科&#xff0c;那么性能就是综合学科&#xff0c;它包含了需求分析、DB、开发、测试、运维的所有学科。其实一般来说在实际性能分析和调优中&#xff0c;测试担任的角色就是写压测脚本并执行脚本查看结果&#…

TPM 是什么?如何查看电脑的 TPM?

TPM 是什么&#xff1f; 首先我们来了解一下 TPM 是什么&#xff0c;TPM 由可信计算组织&#xff08;Trusted Computing Group&#xff0c;TCG&#xff09;开发&#xff0c;为了在提高计算机系统的安全性。随着网络安全威胁的不断增加&#xff0c;TPM 技术逐渐成为确保系统安全…

PDF文件处理不再复杂:9个Python库让一切变得简单

大家好&#xff0c;这里是程序员晚枫&#xff0c;2年前发布了一个开源项目&#xff1a;python-office&#xff0c;目前在GitHub上有800⭐&#xff0c;最近在开发新功能时感觉Python知识有点不够用了。 所以打算从2方面补充自己的知识&#xff1a;研究优秀的第三方库和学习Pyth…

力扣算法题:多数元素 --多语言实现

无意间看到&#xff0c;力扣存算法代码居然还得升级vip。。。好吧&#xff0c;我自己存吧 golang&#xff1a; func majorityElement(nums []int) int {count : 0condidate : 0for _,val : range nums {if count 0 {condidate valcount 1} else if val condidate {count} …

Qt实现程序单实例运行(只能运行1个进程)及QSharedMemory用法

1. 问题提出 在开发时&#xff0c;经常遇到这样的需求或场景&#xff1a;程序只能被启动一次&#xff0c;不能启动多次&#xff0c;启动多次会导致混乱&#xff0c;如&#xff1a;可执行程序用到文件指针、串口句柄等。试想如果存在多个同一个文件的句柄或同一个串口的句柄&…

开源网关Apache APISIX启用JWT身份验证

说明&#xff1a; 本文APISIX的配置参考我之前写的《Ubuntu部署Apache APISIX》 创建最小API 首先&#xff0c;确保你已经安装了.NET 6 SDK。创建文件夹“MinimalApiDemo”&#xff0c;VS Code打开文件夹&#xff0c;打开终端 dotnet new web -o MinimalApiDemo cd Minimal…

python字典包连接mysql

连接mysql, 使用清华大学或其他国内 PyPI 镜像源 如果你在中国&#xff0c;由于网络问题&#xff0c;连接到 Oracle 的官方仓库可能会很慢或失败。在这种情况下&#xff0c;你可以使用国内的 PyPI 镜像源。例如&#xff0c;使用清华大学的镜像源&#xff1a; bash复制代码 pi…

鸿蒙开发接口数据管理:【@ohos.data.distributedData (分布式数据管理)】

分布式数据管理 分布式数据管理为应用程序提供不同设备间数据库的分布式协同能力。通过调用分布式数据各个接口&#xff0c;应用程序可将数据保存到分布式数据库中&#xff0c;并可对分布式数据库中的数据进行增加、删除、修改、查询、同步等操作。 该模块提供以下分布式数据…

Spring的bean的生命周期

想象一下&#xff0c;Spring中的Bean就像是你家后院种植的一株植物&#xff0c;从播种到开花结果&#xff0c;再到最后枯萎&#xff0c;整个过程就像是Bean的生命周期。现在&#xff0c;让我们以这个比喻来了解一下Spring Bean的生命周期吧&#xff1a; 1. 播种&#xff08;…

49.线程池的关闭方法

shutdown方法 1.线程池状态变为shutdown 2.不会接收新任务 3.已提交的任务会执行完 4.此方法不会阻塞调用线程执行 ExecutorService executorService = Executors.newFixedThreadPool(2);executorService.submit(() -> {log.debug("task1 running");try {TimeUnit…

ArrayList——简单洗牌算法

特殊语法介绍&#xff1a; List<List<E>> 该语法情况比较特殊&#xff0c;相当于一个“二维数组”存着一个个线性表的结构&#xff0c;如图&#xff1a; 该语法的灵活性强&#xff0c;可适用于多种类型和多种情况。接下来就使用该语法来实现一个简单的洗牌操作。…

Laravel常用数据库操作指令(模型/DB)

1、使用模型操作数据库&#xff0c;需要先引入相应的模型 如:use App\Models\Test; 2、使用DB操作数据库需要先引入DB库 如:use Illuminate\Support\Facades\DB; 一、数据库查询操作 get方法&#xff1a; 写法一:Test::select(id,name)->where(id,,1)->get();//sel…

vite+ts设置别名

准备工作 安装 types/node 避免代码爆红 npm install types/node一、根目录下 vite.config.ts 文件中配置 import { resolve } from path;resolve: {// 设置文件./src路径为 alias: [{find: ,replacement: resolve(__dirname, ./src)}] }二、根目录下 tsconfig.json 文件中配…

【漏洞复现】用友NC downCourseWare 任意文件读取漏洞

0x01 产品简介 用友NC是一款企业级ERP软件。作为一种信息化管理工具&#xff0c;用友NC提供了一系列业务管理模块&#xff0c;包括财务会计、采购管理、销售管理、物料管理、生产计划和人力资源管理等&#xff0c;帮助企业实现数字化转型和高效管理。 0x02 漏洞概述 用友NC …

618网购节,电商能挡住恶意网络爬虫的攻击吗?

目录 爬虫盗取电商数据的步骤 电商平台如何发现网络爬虫&#xff1f; 如何拦截违法网络爬虫 2023年&#xff0c;杭州中院审结了两起涉及“搬店软件”的不正当竞争案件。本案的原告是国内某大型知名电子商务平台的运营主体&#xff0c;而被告则是开发了一款名为“某搬家快速商品…

汽车分销商文件流转优化:实现稳定高效的文件分发处理

在汽车圈里&#xff0c;分销商可是个不可或缺的角色。他们既要跟汽车厂家紧紧绑在一起&#xff0c;还得跟下游的销售渠道或者直接跟消费者打成一片&#xff0c;文件来回传递那是家常便饭。 这文件发放的速度快不快&#xff0c;安不安全&#xff0c;直接影响到分销商做事的效率…

安徽京准NTP时钟系统:GPS北斗卫星授时下的生活重塑

安徽京准NTP时钟系统&#xff1a;GPS北斗卫星授时下的生活重塑 安徽京准NTP时钟系统&#xff1a;GPS北斗卫星授时下的生活重塑 时间的流逝自古以来时钟都是人类生活与活动的基础。然而&#xff0c;随着科技的进步&#xff0c;我们对时间管理和测量的方法已经发生了翻天覆地的变…

有哪些可以替代postman的接口测试软件?

替代Postman的接口测试软件有很多选择&#xff0c;其中一些流行的工具包括Insomnia、SoapUI、JMeter、Paw等。在本篇文章中&#xff0c;我将从0到1&#xff0c;详细介绍这些接口测试软件的使用方法和规范&#xff0c;帮助你选择适合的工具进行接口测试。 1. Insomnia Insomni…

手机怎么压缩视频?归纳了三种快速压缩方案

手机怎么压缩视频&#xff1f;在数字时代&#xff0c;手机已经成为我们记录生活的重要工具&#xff0c;而视频作为其中的一种主要形式&#xff0c;更是占据了极大的存储空间。然而&#xff0c;随着手机拍摄的视频越来越多&#xff0c;如何高效压缩视频以节省存储空间&#xff0…

力扣 75.颜色分类

给定一个包含红色、白色和蓝色、共 n 个元素的数组 nums&#xff0c;原地对它们进行排序&#xff0c;使得相同颜色的元素相邻&#xff0c;并按照红色、白色、蓝色顺序排列。我们使用整数 0、 1 和 2 分别表示红色、白色和蓝色。 使用sort函数可以不考虑算法&#xff1a; clas…