iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue Router中Matcher的初始化流程
  • 283
分享到

Vue Router中Matcher的初始化流程

2024-04-02 19:04:59 283人浏览 独家记忆
摘要

目录MatchercreateMatcher()的初始化1、Location类型2、rowLocation类型3、Route类型4、RouteRecord类型addRoutes()的

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路径。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

--结束END--

本文标题: Vue Router中Matcher的初始化流程

本文链接: https://www.lsjlt.com/news/146059.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue Router中Matcher的初始化流程
    目录MatchercreateMatcher()的初始化1、Location类型2、rowLocation类型3、Route类型4、RouteRecord类型addRoutes()的...
    99+
    2024-04-02
  • Vue Router中Matcher的初始化流程是什么
    这篇文章主要讲解了“Vue Router中Matcher的初始化流程是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue Router中Matcher的初始化流程是...
    99+
    2023-06-30
  • vue-router初始化的示例分析
    这篇文章主要为大家展示了“vue-router初始化的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue-router初始化的示例分析”这篇文章吧。v...
    99+
    2024-04-02
  • Android中初始化Codec2的具体流程
    目录1、MediaCodec调用流程2、CCodec调用流程小结:3、整体时序图1、MediaCodec调用流程 首先,我们先看下MediaCodec::CreateByType函数...
    99+
    2024-04-02
  • Linux中systemd的初始化流程是什么
    在Linux中,systemd是一个系统和服务管理器,它负责启动系统服务和管理系统进程。systemd的初始化流程如下: 系统引...
    99+
    2024-04-02
  • Flutter初始化流程是怎样的
    本篇内容介绍了“Flutter初始化流程是怎样的”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!Flutter初始化时序Flutter初始化主...
    99+
    2023-06-04
  • SpringMVC初始化流程是什么
    本篇内容主要讲解“SpringMVC初始化流程是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“SpringMVC初始化流程是什么”吧!框架源码是我们 Cod...
    99+
    2024-04-02
  • Spring WebMVC初始化Controller流程详解
    目录SpringWebMVC初始化Controller流程获取容器初始化的所有beanName(父子容器概念)获取所有声明为Controller类的beanName开始处理这种类型的...
    99+
    2024-04-02
  • 深入了解SpringMVC初始化流程
    目录前言1.HttpServletBean2.FrameworkServlet3.DispatcherServlet4.小结前言 框架源码是我们 Coding 晋级中的必修课,SSM...
    99+
    2024-04-02
  • SpringMVC初始化流程实例分析
    本文小编为大家详细介绍“SpringMVC初始化流程实例分析”,内容详细,步骤清晰,细节处理妥当,希望这篇“SpringMVC初始化流程实例分析”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。1.HttpServl...
    99+
    2023-07-02
  • VueRouter 原理解读之初始化流程
    目录1.1 核心概念官方介绍使用与阅读源码的必要性1.2 基本使用路由配置与项目引入路由组件使用跳转 api 调用2.1 createRouter 初始化入口分析大致流程Router...
    99+
    2023-05-19
    VueRouter 初始化原理  VueRouter 初始化
  • Java类初始化执行流程解析
     测试代码:   package com.test.ClassLaoderTest; public class test1 { public static Strin...
    99+
    2024-04-02
  • Java中实例初始化和静态初始化的过程详解
    目录一、实例初始化1.1 实例初始化过程1.2 实例初始化的顺序1.3 实例初始化的注意事项二、静态初始化2.1 静态初始化过程2.2 静态初始化的顺序2.3 静态初始化的注意事项三...
    99+
    2023-05-18
    Java实例初始化和静态初始化 Java实例初始化 Java静态初始化 Java初始化
  • 初始化vue项目的过程 是什么
    本篇内容主要讲解“初始化vue项目的过程 是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“初始化vue项目的过程 是什么”吧!在命令行执行命令“vue init webpack vue-pr...
    99+
    2023-07-05
  • Spring中Bean的加载与SpringBoot的初始化流程详解
    目录前言第一章 Spring中Bean的一些简单概念1.1 SpingIOC简介1.2 BeanFactory1.2.1 BeanDefinition1.2.2 BeanDefini...
    99+
    2024-04-02
  • Vue中如何初始化模块init.js
    这篇文章主要为大家展示了“Vue中如何初始化模块init.js”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue中如何初始化模块init.js”这篇文章吧。我...
    99+
    2024-04-02
  • vue中如何初始化data数据
    目录如何初始化data数据vue程序初始化流程初始化改写的原因流程实现源码流程初始化流程如何初始化data数据 后台管理系统中,新建和编辑使用同一个页面,常常需要初始化data数据。...
    99+
    2024-04-02
  • 从Vue-router到html5中pushState的流程分析
    这篇文章主要介绍了从Vue-router到html5中pushState的流程分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。最近在用vu...
    99+
    2024-04-02
  • Vue中data数据初始化方法详解
    目录初始化化数据的一些方法以下是一个简单的例子父组件子组件显示效果销毁数据的父组件子组件显示效果当组件的根元素使用了v-if的时候, 并不会初始化data中的数据 如果想完全销毁该组...
    99+
    2023-05-19
    Vue data数据初始化 Vue data初始化 Vue数据初始化
  • Vue实例初始化的示例分析
    这篇文章将为大家详细讲解有关Vue实例初始化的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。以下正式开始:Vue官网的生命周期图示表重点说一下 new Vue()...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作