Vue|Vue Router中Matcher的初始化流程
目录
- Matcher
- createMatcher()的初始化
- 1、Location类型
- 2、rowLocation类型
- 3、Route类型
- 4、RouteRecord类型
- addRoutes()的实现
- match()
- matched属性
- 总结
Matcher
createMatcher()的初始化
了解相关的几个概念
1、Location类型
对url的结构化描述。比如url = “/main?p1=1&p2=2222&p3=3333”,它的path就是“ /main” , query 是{ p1:1, p2:222, p3:333 }
declare type Location = {_normalized?: boolean; name?: string; path?: string; hash?: string; query?: Dictionary; params?: Dictionary; append?: boolean; replace?: boolean; }
2、rowLocation类型
declare type RawLocation = string | Location//除了是Location类型还可以是字符串
3、Route类型
表示一条路由,属性也包括path、query、hash等。重要的是mached它表示匹配到的所有的 RouteRecord 对象。
declare type Route = {path: string; name: ?string; hash: string; query: Dictionary; params: Dictionary; fullPath: string; matched: Array; redirectedFrom?: string; meta?: any; }
4、RouteRecord类型
declare type RouteRecord = {path: string; regex: RouteRegExp; components: Dictionary; instances: Dictionary; //表示组件的实例 一个对象类型name: ?string; parent: ?RouteRecord; //表示父的 RouteRecord redirect: ?RedirectOption; matchAs: ?string; beforeEnter: ?NavigationGuard; meta: any; props: boolean | Object | Function | Dictionary; }
matcher
对象对外提供 match() 和 addRoutes()两个方法。addRoutes()
作用是动态添加路由配置。match()
根据传入的rawLoction类型的raw 和当前的路径 currentRoute 计算出一个新的路径并返回。
addRoutes()的实现
- 是调用createRouteMap()目标是把用户的路由配置转成一张路由映射表。方法中遍历路由配置routes, 返回值是一个包括 pathList 、pathMap 、nameMap的对象。
- pathList是存储所有path值,pathMap 表示一个path到RouteRecord的映射关系,nameMap 表示name到RouteRecord的映射关系。
//记录path 及 path到RouteRecord的映射if (!pathMap[record.path]) {pathList.push(record.path)//['/aaa/bbb','/cccc/ddd']pathMap[record.path] = record//path值作为key ///aaa/bbb:{ path:"/aaa/bbb" ,regex : //}}
pathMap值示例
【Vue|Vue Router中Matcher的初始化流程】
文章图片
//记录name到RouteRecord的映射;name值作为keyif (name) {if (!nameMap[name]) {nameMap[name] = record} else if (process.env.NODE_ENV !== 'production' && !matchAs) {warn(false,`Duplicate named routes definition: ` +`{ name: "${name}", path: "${record.path}" }`)}}
得到的这些map是为了路由匹配做了基础。
match()
作用是匹配一个路径并找到映射的组件。
执行过程
- 先normalizeLocation,得到一个标准化的定位描述location{ _normalized: true, path:"/foo", query:{}, hash:"" }
- (1)name存在时,通过name从nameMap中拿到路由记录record,接着处理记录record中的参数。将location、record和vueRouter对象作为参数传入到createRoute()中生成一个新的route路径。
- (2)name不存在而path值存在,遍历路径集合pathList,由取到的record和location匹配路由。如果匹配就去生成一个新路径。
matched属性
在VueRouter中,所有的Route 最终都是通过 createRoute 函数创建,并且它最后是不可以被外部修改的。 Route对象中有一个重要属性 matched,它通过 formatMatch(record) 计算得到:
function formatMatch (record: ?RouteRecord): Array{const res = []while (record) {res.unshift(record)record = record.parent}return res}
record循环往上找parent,直到找到最外层。把所有的record都放到一个数组里面,它记录了一条线路上的所有record。matched属性为之后渲染组件提供了依据。
总结
- createMatcher的初始化就是根据路由的匹配创建路径、名称到路由记录的映射表。
- match会根据传入的位置和路径计算新的位置,并匹配到对应的路由记录,然后根据新的位置和记录创建新的route路径。
推荐阅读
- vue3.0语法糖内的defineProps及defineEmits解析
- 如何在Windows 11中清除缓存(7种有效方法指南)
- Microsoft Store无法在Windows 11中运行(这是解决方法指南)
- 如何在Windows 11中删除“未满足系统要求”水印(解决方法)
- 投稿|RNG战队LPL春季赛夺冠,中国电竞产业未来如何实现“破与立”?
- R中的高效批量处理函数(lapply sapply apply tapply mapply)(转)
- 关于Content-Type中application/x-www-form-urlencoded 和 multipart/form-data的区别及用法
- Testin实验室MoiMark安卓中国终端体验性能排行榜(11月报)
- 智能家居开源平台智汀的智慧中心,除了跨品牌联动,还能做什么()
- 如何修复Windows 11中的“撤消对计算机所做的更改”错误(修复方法指南)