当前位置: 首页 > news >正文

vue-router 源码分析——1. 路由匹配

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

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

本章讲解router中创建vue-router 实例时内部发生了什么。
另外我的vuex3源码分析也发布完了,欢迎大家学习:
vuex3 最全面最透彻的源码分析

创建vue-router 实例时内部发生了什么

  • 假设最基本的情况,即官网中的入门示例:
const routes = [{ path: '/foo', component: Foo },{ path: '/bar', component: Bar }
]
const router = new VueRouter({routes // (缩写) 相当于 routes: routes
})
  • 在实例化的过程中创建matcher 匹配器,调用了 createMatcher 函数
// ./router.js
import type { Matcher } from './create-matcher'
export default class VueRouter {matcher: Matcherconstructor (options: RouterOptions = {}) {this.matcher = createMatcher(options.routes || [], this)  }
}
  • 在 createMatcher 函数中调用 createRouteMap 函数创建了一些和path相关的数据,并返回包含自己内容定义的一些函数组成的对象。
// createMatcher函数 ./create-matcher.js
import { createRouteMap } from './create-route-map'
export function createMatcher(routes, route): {const {pathList, pathMap, nameMap } = createRouteMap(routes)function match() {}function addRoute() {}function getRoutes() {}function addRoutes() {}return {match,addRoute,getRoutes,addRoutes    }
}
  • createRouteMap函数利用routes数据得出上面需要的对象内容(pathList, pathMap, nameMap),对应 ./create-route-map.js 文件。
  • 内部遍历routes => route,并调用 addRouteRecord 函数。
  • 对每个route的path,调用 normalizePath 函数规范化。
  • 构建一个 record 对象,基本内容还是和route一样,比如path, component。component这里有一个逻辑或运算符,是用来处理命名视图的,可以先不管。
  • pathList 记录每个record的path。
  • pathMap 记录record的path和record的映射关系。
  • nameMap 记录name(命名路由)和recoed的映射关系。
export function createRouteMap(routes: Array<RouteConfig>,// 下面的其他参数可先不管,因为只传了routes入参,都可看做undefine or anyoldPathList?: Array<string>,oldPathMap?: Dictionary<RouteRecord>,oldNameMap?: Dictionary<RouteRecord>,parentRoute?: RouteRecord 
): {pathList: Array<string>,pathMap: Dictionary<RouteRecord>,nameMap: Dictionary<RouteRecord>
} {// 初始化都是空数组和空字典const pathList: Array<string> = oldPathList || []const pathMap: Dictionary<RouteRecord> = oldPathMap || Object.create(null)const nameMap: Dictionary<RouteRecord> = oldNameMap || Object.create(null)routes.forEach(route => {addRouteRecord(pathList, pathMap, nameMap, route, parentRoute)    })return {pathList,pathMap,nameMap    }
}function addRouteRecord(pathList: Array<string>,pathMap: Dictionary<RouteRecord>,nameMap: Dictionary<RouteRecord>,route: RouteConfig,parent?: RouteRecord,matchAs?: string
) {const { path, name } = routeconst pathToRegexpOptions = {}// path 规范化const normalizedPath = normalizePath(path, parent, pathToRegexpOptions.strict)const record: RouteRecord = {path: normalizedPaath,components: route.components || { default: route.component },...}// 记录 pathList 和 pathMap 的内容if (!pathMap[record.path]) {pathList.push(record.path)pathMap[record.path] = record    }
}function normalizePath(path: string,parent?: RouteRecord,strict?: boolean
) {if (!strict) path = path.replace(/\/$/, '') // 将path尾部的 / 去掉(如果有)if (path[0] == '/') return path
}
  • 至此,router在初始化时,创建了一个 VueRouter类,里面有一个 matcher属性,包含了用户定义的路由的path、components和相关的匹配逻辑函数,以及三张路由记录表。
  • 下一章会分析 router-link 组件是如何实现导航的。

相关文章:

vue-router 源码分析——1. 路由匹配

这是对vue-router 3 版本的源码分析。 本次分析会按以下方法进行&#xff1a; 按官网的使用文档顺序&#xff0c;围绕着某一功能点进行分析。这样不仅能学习优秀的项目源码&#xff0c;更能加深对项目的某个功能是如何实现的理解。这个对自己的技能提升&#xff0c;甚至面试时…...

百度云下载不限速方式集合

使用解析网站配合Motrix工具软件 下载Motrix工具&#xff1a;Motrix下载链接打开解析网址&#xff1a;解析网站获取&#xff0c;将百度网盘链接粘贴到解析网站&#xff0c;获取下载链接。在Motrix中配置Aria2 RPC地址&#xff1a;ws://localhost:16800/jsonrpc开始下载&#x…...

2024年6月1日 (周六) 叶子游戏新闻

Embracer探讨单机游戏大作涨价超过70美元的可能性在Embracer集团等待公布新公司名称的同时&#xff0c;他们对游戏大作的价格上涨做出了评论。几年来&#xff0c;游戏大作的价格已经达到了70美元的门槛。Embracer集团的CEO Lars Wingefors在采访中表示&#xff0c;电子游戏行业…...

MathorCup挑战赛获奖名单公示,第九届研讨会及颁奖典礼即将举行

近日&#xff0c;备受瞩目的2024年第十四届MathorCup高校数学建模挑战赛圆满落幕&#xff0c;竞赛组委会于近日公示了获奖名单初稿。本届竞赛自2024年4月12日至16日举行&#xff0c;吸引了来自全国740所高校的9119支队伍踊跃参与&#xff0c;其中包括本科生、研究生、专科生及教…...

vulnhub靶机xptosystem

下载地址&#xff1a;https://download.vulnhub.com/xpto/xptosystem.ova 主机发现 端口扫描 服务扫描 漏洞扫描 看一下web 目录爆破 那不用说肯定看看robots.txt 要检查readme去看看 看不懂 这个是靶场吧很像 在最后看着挺像url路径的 还真是&#xff0c;我直接base64 坏了还…...

Spring Boot详解:深入了解与实践

文章目录 1. Spring Boot简介1.1 什么是Spring Boot&#xff1f;1.2 Spring Boot的历史背景1.3 Spring Boot的核心特点 2. Spring Boot的核心概念2.1 自动配置2.1.1 自动配置原理2.1.2 自定义配置 2.2 Spring Boot Starter2.3 Spring Boot CLI 3. Spring Boot的主要功能模块3.1…...

FreeRtos进阶——中断的内部逻辑

中断与非中断API的区别 BaseType_t xQueueSendToBack(QueueHandle_t xQueue,const void *pvItemToQueue,TickType_t xTicksToWait); BaseType_t xQueueSendToBackFromISR(QueueHandle_t xQueue,const void *pvItemToQueue,BaseType_t *pxHigherPriorityTaskWok…...

Centos7对比Ubuntu一些常用操作差异点

Centos7对比Ubuntu一些常用操作差异点 CentOS 7将于2024年6月30日停止维护&#xff0c;CentOS8已经转为Rhel的上游项目。同时Centos7的软件仓库中&#xff0c;部分软件版本较老。后续使用过程中可以考虑切换到Ubuntu。 下面总结了一些两个系统的常见差异点&#xff0c;包括软…...

24、matlab二维和三维网格(meshgrid函数)以及散点数据插值 griddata()函数

1、二维和三维网格(meshgrid函数) 语法 语法1:[X,Y] = meshgrid(x,y) 基于向量 x 和 y 中包含的坐标返回二维网格坐标。 语法2:[X,Y] = meshgrid(x) 与 [X,Y] = meshgrid(x,x) 相同,并返回网格大小为 length(x)length(x) 的方形网格坐标。 语法3:[X,Y,Z] = meshgrid(x,y,…...

Codeforces Round 950 (Div. 3)

好久没写题解了&#xff0c;今天来写个题解。 A - 问题 Generator #include "bits/stdc.h" using namespace std;#define int long long #define endl \n #define IOS ios::sync_with_stdio(0),cin.tie(0); #define all(x) x.begin(),x.end() #define pi pair<in…...

弘君资本炒股开户:如何看待股价波动?

在股票商场上股价的动摇无疑是投资者最为关心的话题之一&#xff0c;面临股价的起伏不定投资者往往会感到迷茫和焦虑。关于怎么看待股价动摇&#xff0c;弘君资本下面就为大家详细介绍一下。 股价动摇是股市运行的常态&#xff0c;股市是国民经济的晴雨表&#xff0c;股票价格…...

操作系统实验六 文件系统验证实验

前言 当时由于假期的原因&#xff0c;我们不需要做实验五&#xff0c;所以实验六是我们做的最后一个实验&#xff0c;因此实验五就需要靠大家自己完成了。 1.实验目的 初步掌握Linux系统文件权限和IO操作。 2.实验内容 熟悉Linux系统文件权限和使用相关IO函数进行文件创建和…...

python中的循环控制语句break与continue

学习这两个语句之前&#xff0c;我们要先了解这两个语句是什么意思&#xff1a; break&#xff1a;中断、打破的意思。所以它的跳出循环的意思 continue&#xff1a;继续的意思&#xff0c;意思是跳过当前条件&#xff0c;继续循环 新需求来了&#xff01;我们不仅要告诉 Py…...

C语言笔记23 •文件操作•

1.为什么要使用文件&#xff1f; 文件&#xff0c;顾名思义就是存储我们所写在电脑上的文本内容。如果没有⽂件&#xff0c;我们写的程序的数据是存储在电脑的内存中&#xff0c;如果程序退出&#xff0c;内存回收&#xff0c;数据就丢失 了&#xff0c;等再次运⾏程序&#x…...

新项目来了,JDK 17和JDK 21 该如何选择?

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …...

友顺科技(UTC)分立器件与集成IC产品选型和应用

友顺科技股份有限公司成立于1990年&#xff0c;是全球领先的集成电路与功率半导体厂商 ,集团总部位于台北&#xff0c;生产基地位于福州、厦门。 友顺科技具有完整模拟组件产品线&#xff0c;其中类比IC涵盖各种稳压器、PWM控制IC, 放大器、比较器、逻辑IC、Voltage Translato…...

并发与多线程:创建多个线程,数据共享

数据共享问题分析 1. 只读的数据&#xff1a;安全稳定的&#xff0c;不需要特殊处理&#xff1b; 2. 又读又写的数据&#xff1a;2个线程写&#xff0c;8个线程读&#xff0c;写不好程序会崩。 c11并发于多线程_2章_4节_哔哩哔哩_bilibili...

【机器学习数据挖掘】基于ARIMA 自回归积分滑动平均模型的销售价格库存分析报告 附完整python代码

资源地址&#xff1a;Python数据分析大作业 4000字 图文分析文档 销售分析 完整python代码 ​ 完整代码分析 同时销售量后1000的sku品类占比中&#xff08;不畅销产品&#xff09;如上&#xff0c;精品类产品占比第一&#xff0c;达到66.7%&#xff0c;其次是香化类产品&#…...

LightGBM 进行回归建模的流程

LightGBM 进行回归建模的流程 文章最前&#xff1a; 我是Octopus&#xff0c;这个名字来源于我的中文名–章鱼&#xff1b;我热爱编程、热爱算法、热爱开源。所有源码在我的个人github &#xff1b;这博客是记录我学习的点点滴滴&#xff0c;如果您对 Python、Java、AI、算法有…...

【Linux】多进程基础--信号

文章目录 信号常见信号信号定时函数 信号 发生事件时通过信号向进程进行通知&#xff0c;在软件层次上模拟中断&#xff0c;也叫软件中断&#xff0c;处理优先级较高对于前台进程可以通过特殊的字符发送信号&#xff0c;例如CtrlC即给当前进程发送一个SIGINT中断信号。kill命令…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

Redis:现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

MySQL 索引底层结构揭秘:B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

PHP 8.5 即将发布:管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...