Matcher

createMatcher()的初始化

了解相關(guān)的幾個(gè)概念

1、Location類(lèi)型

對(duì)url的結(jié)構(gòu)化描述。比如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類(lèi)型

declare type RawLocation = string | Location ?//除了是Location類(lèi)型還可以是字符串

3、Route類(lèi)型

表示一條路由，屬性也包括path、query、hash等。重要的是mached它表示匹配到的所有的 RouteRecord 對(duì)象。

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類(lèi)型

declare type RouteRecord = {
? path: string;
? regex: RouteRegExp;
? components: Dictionary<any>;
? instances: Dictionary<any>; ? //表示組件的實(shí)例 一個(gè)對(duì)象類(lèi)型
? name: ?string;
? parent: ?RouteRecord; ?//表示父的 RouteRecord?
? redirect: ?RedirectOption;
? matchAs: ?string;
? beforeEnter: ?NavigationGuard;
? meta: any;
? props: boolean | Object | Function | Dictionary<boolean | Object | Function>;
}

• matcher對(duì)象對(duì)外提供 match() 和 addRoutes()兩個(gè)方法。
• addRoutes() 作用是動(dòng)態(tài)添加路由配置。
• match() 根據(jù)傳入的rawLoction類(lèi)型的raw 和當(dāng)前的路徑 currentRoute 計(jì)算出一個(gè)新的路徑并返回。

addRoutes()的實(shí)現(xiàn)

• 是調(diào)用createRouteMap()目標(biāo)是把用戶(hù)的路由配置轉(zhuǎn)成一張路由映射表。方法中遍歷路由配置routes， 返回值是一個(gè)包括 pathList 、pathMap 、nameMap的對(duì)象。
• pathList是存儲(chǔ)所有path值，pathMap 表示一個(gè)path到RouteRecord的映射關(guān)系，nameMap 表示name到RouteRecord的映射關(guān)系。

//記錄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是為了路由匹配做了基礎(chǔ)。

match()

作用是匹配一個(gè)路徑并找到映射的組件。

執(zhí)行過(guò)程

• 先normalizeLocation，得到一個(gè)標(biāo)準(zhǔn)化的定位描述location{ _normalized: true, path:"/foo", query:{}, hash:"" }
• （1）name存在時(shí)，通過(guò)name從nameMap中拿到路由記錄record，接著處理記錄record中的參數(shù)。將location、record和vueRouter對(duì)象作為參數(shù)傳入到createRoute()中生成一個(gè)新的route路徑。
• （2）name不存在而path值存在，遍歷路徑集合pathList，由取到的record和location匹配路由。如果匹配就去生成一個(gè)新路徑。

matched屬性

在VueRouter中，所有的Route 最終都是通過(guò) createRoute 函數(shù)創(chuàng)建，并且它最后是不可以被外部修改的。 Route對(duì)象中有一個(gè)重要屬性 matched，它通過(guò) formatMatch(record) 計(jì)算得到：

function formatMatch (record: ?RouteRecord): Array<RouteRecord> {
  const res = []
  while (record) {
    res.unshift(record)
    record = record.parent
  }
  return res
}

record循環(huán)往上找parent，直到找到最外層。把所有的record都放到一個(gè)數(shù)組里面，它記錄了一條線路上的所有record。matched屬性為之后渲染組件提供了依據(jù)。

總結(jié)

• createMatcher的初始化就是根據(jù)路由的匹配創(chuàng)建路徑、名稱(chēng)到路由記錄的映射表。
• match會(huì)根據(jù)傳入的位置和路徑計(jì)算新的位置，并匹配到對(duì)應(yīng)的路由記錄，然后根據(jù)新的位置和記錄創(chuàng)建新的route路徑。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。