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() 作用是动态添加路由配置。
  • 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()

作用是匹配一个路径并找到映射的组件。

执行过程

  • 先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<RouteRecord> {
  const res = []
  while (record) {
    res.unshift(record)
    record = record.parent
  }
  return res
}

record循环往上找parent,直到找到最外层。把所有的record都放到一个数组里面,它记录了一条线路上的所有record。matched属性为之后渲染组件提供了依据。

总结

  • createMatcher的初始化就是根据路由的匹配创建路径、名称到路由记录的映射表。
  • match会根据传入的位置和路径计算新的位置,并匹配到对应的路由记录,然后根据新的位置和记录创建新的route路径。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • vue 实现无规则截图

    vue 实现无规则截图

    这篇文章主要介绍了vue 实现无规则截图的方法,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-04-04
  • 详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)

    详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)

    本篇文章主要介绍了详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli),具有一定的参考价值,有需要的可以了解下
    2017-08-08
  • Vue函数式组件-你值得拥有

    Vue函数式组件-你值得拥有

    这篇文章主要介绍了Vue函数式组件及vue函数式组件的优缺点,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • Vue生命周期深入分析总结

    Vue生命周期深入分析总结

    Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期
    2022-08-08
  • vue中如何引入jest单元测试

    vue中如何引入jest单元测试

    这篇文章主要介绍了vue中如何引入jest单元测试问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • Vue中的 watch监听属性详情

    Vue中的 watch监听属性详情

    这篇文章主要介绍了Vue中的 watch监听属性详情,mputed计算属性用来监听多个数据;watch 监听单个数据;本文将具体介绍的是 watch监听属性,感兴趣的小伙伴可以参考一下文章的具体内容,希望对你有所帮助
    2021-12-12
  • 解决v-for中使用v-if或者v-bind:class失效的问题

    解决v-for中使用v-if或者v-bind:class失效的问题

    今天小编就为大家分享一篇解决v-for中使用v-if或者v-bind:class失效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 基于Vue3实现印章徽章组件的示例代码

    基于Vue3实现印章徽章组件的示例代码

    这篇文章主要介绍了如何利用vue3实现简单的印章徽章控件,文中通过示例代码讲解详细,需要的朋友们下面就跟随小编来一起学习学习吧
    2023-04-04
  • Vue+mui实现图片的本地缓存示例代码

    Vue+mui实现图片的本地缓存示例代码

    这篇文章主要介绍了Vue+mui实现图片的本地缓存的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • vue如何清除浏览器历史栈

    vue如何清除浏览器历史栈

    这篇文章主要介绍了vue如何清除浏览器历史栈,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05

最新评论