Vue?Router中Matcher的初始化流程
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<string>;
? params?: Dictionary<string>;
? 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<string>;
? params: Dictionary<string>;
? fullPath: string;
? matched: Array<RouteRecord>;
? redirectedFrom?: string;
? meta?: any;
}4、RouteRecord類型
declare type RouteRecord = {
? path: string;
? regex: RouteRegExp;
? components: Dictionary<any>;
? instances: Dictionary<any>; ? //表示組件的實例 一個對象類型
? name: ?string;
? parent: ?RouteRecord; ?//表示父的 RouteRecord?
? redirect: ?RedirectOption;
? matchAs: ?string;
? beforeEnter: ?NavigationGuard;
? meta: any;
? props: boolean | Object | Function | Dictionary<boolean | Object | Function>;
}matcher對象對外提供 match() 和 addRoutes()兩個方法。addRoutes()作用是動態(tài)添加路由配置。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值示例

//記錄name到RouteRecord的映射; name值作為key
if (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()
作用是匹配一個路徑并找到映射的組件。
執(zhí)行過程
- 先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 函數創(chuàng)建,并且它最后是不可以被外部修改的。 Route對象中有一個重要屬性 matched,它通過 formatMatch(record) 計算得到:
function formatMatch (record: ?RouteRecord): Array<RouteRecord> {
const res = []
while (record) {
res.unshift(record)
record = record.parent
}
return res
}
record循環(huán)往上找parent,直到找到最外層。把所有的record都放到一個數組里面,它記錄了一條線路上的所有record。matched屬性為之后渲染組件提供了依據。
總結
- createMatcher的初始化就是根據路由的匹配創(chuàng)建路徑、名稱到路由記錄的映射表。
- match會根據傳入的位置和路徑計算新的位置,并匹配到對應的路由記錄,然后根據新的位置和記錄創(chuàng)建新的route路徑。
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

