欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue?Router中Matcher的初始化流程

 更新時間:2022年04月15日 08:40:34   作者:Bolt_li  
這篇文章主要介紹了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路徑。

以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。 

相關文章

  • vue組件Prop傳遞數據的實現示例

    vue組件Prop傳遞數據的實現示例

    本篇文章主要介紹了vue組件Prop傳遞數據的實現示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • Vue2?響應式系統(tǒng)之異步隊列

    Vue2?響應式系統(tǒng)之異步隊列

    這篇文章主要介紹了Vue2?響應式系統(tǒng)之異步隊列,文章基于Vue2?的相關資料展開對主題的詳細介紹,具有一定的參考價值需要的小伙伴可以參考一下
    2022-04-04
  • Vue的自定義組件不能使用click方法的解決

    Vue的自定義組件不能使用click方法的解決

    這篇文章主要介紹了Vue的自定義組件不能使用click方法的解決,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • vue2?對全局自定義指令一次性進行注冊的方法

    vue2?對全局自定義指令一次性進行注冊的方法

    這篇文章主要介紹了vue2?對全局自定義指令一次性進行注冊,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-06-06
  • Vue組件之間的參數傳遞與方法調用的實例詳解

    Vue組件之間的參數傳遞與方法調用的實例詳解

    這篇文章主要介紹了Vue組件之間的參數傳遞與方法調用,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-12-12
  • 詳解Vue如何實現響應式布局

    詳解Vue如何實現響應式布局

    這篇文章主要為大家詳細介紹了Vue實現響應式布局的兩種方法,文中的示例代碼講解詳細,具有一定的學習價值,感興趣的小伙伴可以跟隨小編一起了解一下
    2023-12-12
  • vue里的axios如何獲取本地json數據

    vue里的axios如何獲取本地json數據

    這篇文章主要介紹了vue里的axios如何獲取本地json數據,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • antd?vue?table表格內容如何格式化

    antd?vue?table表格內容如何格式化

    這篇文章主要介紹了antd?vue?table表格內容如何格式化,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-01-01
  • 解決vue 綁定對象內點擊事件失效問題

    解決vue 綁定對象內點擊事件失效問題

    今天小編就為大家分享一篇解決vue 綁定對象內點擊事件失效問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 結合axios對項目中的api請求進行封裝操作

    結合axios對項目中的api請求進行封裝操作

    這篇文章主要介紹了結合axios對項目中的api請求進行封裝操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09

最新評論