vue-router 源码分析——2. router-link 组件是如何实现导航的

这是对vue-router 3 版本的源码分析。
本次分析会按以下方法进行:

  1. 按官网的使用文档顺序,围绕着某一功能点进行分析。这样不仅能学习优秀的项目源码,更能加深对项目的某个功能是如何实现的理解。这个对自己的技能提升,甚至面试时的回答都非常有帮助。
  2. 在围绕某个功能展开讲解时,所有不相干的内容都会暂时去掉,等后续涉及到对应的功能时再加上。这样最大的好处就是能循序渐进地学习,同时也不会被不相干的内容影响。省略的内容都会在代码中以…表示。
  3. 每段代码的开头都会说明它所在的文件目录,方便定位和查阅。如果一个函数内容有多个函数引用,这些都会放在同一个代码块中进行分析,不同路径的内容会在其头部加上所在的文件目录。

本章讲解router中 router-link 组件是如何实现导航的。
另外我的vuex3源码分析也发布完了,欢迎大家学习:
vuex3 最全面最透彻的源码分析
还有vue-router的源码分析:
vue-router 源码分析——1. 路由匹配
vue-router 源码分析——2. router-link 组件是如何实现导航的

官网例子

  • 在官网例子中,对做了三个注释:这是个组件、传入to属性,渲染成标签。
  • 以我们主要分析 router-link 组件如果利用必要的数据来实现导航的。
  • 这里先解释一下,渲染html页面的功能,是vue-router调用了vue的render函数,这个是vue的核心功能不做分析。所以这里是分析router是如何定位到对应路由以及做了哪些信息收集和处理的。
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script><div id="app"><h1>Hello App!</h1><p><!-- 使用 router-link 组件来导航. --><!-- 通过传入 `to` 属性指定链接. --><!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --><router-link to="/foo">Go to Foo</router-link><router-link to="/bar">Go to Bar</router-link></p>
</div>

Vue实例挂载link组件,从而可以使用标签

  • 这里的install.js实际上是一个VUE的插件,这样当创建和挂载根实例时自动导入了插件。
  • 这里面还涉及到VUE的混入(Vue.mixin),实现了在任意组件内通过this.$ router和this.$route来访问路由器和当前路由。感兴趣的小伙伴可以去看VUE官网的解释。
// ./install.js
import Link from './components/link'export function install(Vue) {Vue.component('RouterLink', Link)
}

link.js源码内容

  • 传入了一个to变量,对应’/foo’,tag默认为’a’,即标签.
  • render函数是vue用来描述如果构建虚拟DOM的,即如何按某个定义来构建组件。
  • 如何渲染为html是vue中的核心内容,这里不做讨论,只分析vue-router中的源码内容,即resolve方法。
const { location, route, href } = router.resolve(this.to,current,this.append        )   ...const classes = {}const data: any = { class: classes }...return h(this.tag, data, this.$slots.default)             }
}

路由实例的 resolve 方法

  • resolve入参的to是我们传入的字符串’/foo’,current是当前路由this.$route,append是undefine。
  • resolve 方法内部又调用了很多函数和方法,得到需要的数据并返回。
  • 让我们接着分析调用的函数(normalizeLocation,this.match, createHref)。
// ./router.js
export default class VueRouter {...resolve (to: RawLocation,current?: Route,append?: boolean) {...const location = normalizeLocation(to, current, append, this)const route = this.match(location, current)const fullPath = route.redirectedFrom || route.fullPathconst base = this.history.baseconst href = createHref(base, fullPath, this.mode) // this.mode 看做 'hash' 即可return {location,route,href...}                      }
}

normalizeLocation 函数分析

  • 入参说明:raw = ‘/foo’, current = this.route, append = undifune, router = this.$router
  • parsePath函数暂时没有额外影响,这里不做分析,只是说明 parsePath 的具体内容
  • 最终返回一个对象,里面有 _normalized: true 和 path: '/foo’相关内容。
// ./util/location.js
export function normalizeLocation(raw: RawLocation,current: ?Route,append: ?boolean,router: ?VueRouter
): Location {let next: Location = typeof raw === 'string' ? { path: raw } : rawif (next._normalized) {return next    }...// parsePath 的实际内容为 {'path': '/foo', 'query': '', 'hash': ''}const parsedPath = parsePath(next.path || '')// basePath 为当前的路由的路径const basePath = (current && current.path) || '/'// resolvePath函数对'/foo'也没有额外影响,可以理解直接返回了'/foo'赋值给pathconst path = parsedPath.path? resolvePath(parsedPath.path, basePath, append || next.append): basePath...return {_normalized: true,path,...    }
}

this.match方法获得的route是什么

  • 对应代码 const route = this.match(location, current),current = this.$route。
  • match方法和resolve方法一样,是定义在VueRouter中的,它直接返回了路由匹配器的match方法。
  • 路由匹配器中的match方法会遍历pathList和pathMap,利用正则表达式查看对应的path是否匹配,如果匹配,这里则返回 _createRoute 函数调用。
    • pathList和pathMap是在初始化router时生成的,这里为方便理解,再说明一下。
    • pathList是一个数组,记录着我们初始化时定义的各个url path,例如’/foo’,‘/bar’
    • pathMap是一个哈希结构,key为path,value为相关的数据(比如path, component, regex等等)。
  • _createRoute 函数又调用了 ./util/route.js 的 createRoute 函数。它返回了一个被冻结的对象,里面主要有path和matched属性,matched在这里可以看做等于 [record]。
  • 所以this,match方法返回的是一个和我们输入的路径to匹配的一个route对象,里面有我们需要的path,record等内容。
// ./router.js
export default class VueRouter {...match (raw: RawLocation, current?: Route, redirectedFrom?: Location): Route {return this.matcher.match(raw, current, redirectedFrom)}
}// ./create-matcher.js
export function createMatcher(...) {...function match {raw: RawLocation,currentRoute?: Route,redirectedFrom?: Location}: Route {// 由于传入的raw是已经标准化过的,所以这里的location和raw没有任何区别const location = normalizedLocation(raw, currentRoute, false, router)const { name } = locationif (name) {...        } else if (location.path) {location.params = {}for (let i = 0; i < pathList.length; i++) {const path = pathList[i]const record = pathMap[path]if (matchRoute(record.regex, location.path, location.param)) {return _createRoute(record, location, redirectedFrom)                }            }                    }}function matchRoute(regex: RouteRegExp,path: string,params: Object): boolean {const m = path.match(regex)if (!m) {return false    } else if (!params) {return true    }...return true}function _createRoute(record: ?RouteRecord,location: Location,redirectedFrom?: Location            ): Route {...return createRoute(record, location. redirectedFrom, router)    }
}// ./util/route.js
export function createRoute(record: ?RouteRecord,location: Location,redirectedFrom?: ?Location,router?: VueRouter
): Route {const route: Route = {path: location.path || '/',matched: record ? formatMatch(record) :[], // 这里可以先简单理解为 [record]...            }return Object.freeze(route)
}

createHref函数分析

  • 对应代码 href = createHref(base, fullPath, this.mode),对应base = undefine, fullPath = ‘/foo’, this.mode = ‘hash’。
  • 在vue-route中,默认为hash模式,所以所有的的path前面都会带一个#号
  • 这个#号就是在这个函数中体现的
// ./router.js
function createHref(base: string, fullPath: string, mode) {var path = mode === 'hash' ? '#' + fullPath : fullPathreturn base ? cleanPath(base + '/' + path) : path
}

总结

  • recolve返回的对象里面的内容主要为location, route , href。
  • location是标准化后的to,并且打上了标记表示已标准化,防止多次标准化,提升效率。
  • route是通过遍历pathList和pathMap,利用正则表达式找到的和to匹配的路由对象,里面包含很多需要的内容。
  • href在默认的hash模式下,会在to的前面加上#号,例如这里的’#/foo’。
// ./router.jsexport default class VueRouter {...resolve(to, current, append) {const location = normalizeLocation(to, current, append, this)const route = this.match(location, current)const fullPath = route.redirectedFrom || route.fullPathconst base = this.history.baseconst href = createHref(base, fullPath, this.mode)return {location,route,href,...        }    }
}
  • 后续的内容就是vue利用h函数将link组件渲染为html的内容,例如设置类名,定义handler函数处理跳转,绑定点击事件,指定 a 标签等等。
  • 这里再对vue-router官方文档中提到的匹配成功后自动设置的class属性值,通过源码分析一下:
    • 通过下面的代码可以看出,如果你不想要 router-link-active 的类名,可以在初始化router时,加入options.linkActiveClass属性就可以了

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/22398.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS选择器和样式

CSS CSS&#xff1a;选择器&#xff1a;通配符选择器&#xff1a;基本选择器&#xff1a;标签选择器&#xff1a;类选择器&#xff1a;ID选择器&#xff1a;基本选择器的优先级别: 群组选择器:派生选择器&#xff1a;后代选择器&#xff1a;子代选择器&#xff1a;相邻兄弟选择…

sed批量修改shell脚本内容

需求:邮件服务器脚本ip做了切换,由原先的11.22.33.44,切换为11.22.33.55 需要把所有使用了11.22.33.44该ip的脚本改为11.22.33.55 示例: #建2个测试文件 cat test1.txt 11.22.33.44 hello 11.22.33.44cat test2.txt 11.22.33.44 world#1.先找出哪些脚本包含该ip grep 11.22.3…

正邦科技(day3)

出厂测试 设备校准 这个需要注意的是校准电流、电压、电感的时候有时候负感器会装反&#xff0c;mcu会坏&#xff0c;需要flash一下清空内存

【猫狗识别系统】图像识别Python+TensorFlow+卷积神经网络算法+人工智能深度学习

猫狗识别系统。通过TensorFlow搭建MobileNetV2轻量级卷积神经算法网络模型&#xff0c;通过对猫狗的图片数据集进行训练&#xff0c;得到一个进度较高的H5格式的模型文件。然后使用Django框架搭建了一个Web网页端可视化操作界面。实现用户上传一张图片识别其名称。 一、前言 …

iptables备份

备份 iptables sudo iptables-save > iptables_backup.txt文件还原

【安装笔记-20240529-Windows-poedit 翻译编辑器】

安装笔记-系列文章目录 安装笔记-20240529-Windows-Poedit 翻译编辑器 文章目录 安装笔记-系列文章目录安装笔记-20240529-Windows-Poedit 翻译编辑器 前言一、软件介绍名称&#xff1a;Poedit主页官方介绍 二、安装步骤测试版本&#xff1a;Poedit-3.4.4下载链接安装界面 三、…

华为机械工程师面试问题

在机械工程师的面试中,面试官可能会提出一系列问题,以评估应聘者的专业知识、技能、经验以及解决问题的能力。以下是一些可能的面试题: 基础知识与技能: 请解释机械工程中常用的几种传动方式,并比较它们的优缺点。描述一下你在机械设计过程中常用的软件,并举例说明你是如…

网络安全设备常见部署模式介绍

文章目录 前言串联模式路由模式透明模式 旁路模式旁路监听代理模式正向代理透明代理反向代理 前言 网络安全设备主要有串联模式和旁路模式。这些模式在网络安全架构中扮演着关键角色&#xff0c;以确保数据传输的安全性和高效性。 串联模式 串联模式要求所有流量都必须通过安…

程序员为什么会成为工具人——及其一些破局的思考

一、程序员为什么会成为工具人 程序员为什么会成为工具人的因素分析 序号因素分析1 技术从来不是解决用户价值问题的那个人&#xff0c;产品才是解决用户需求痛点创造价值问题的那个人 &#xff08;技术只是服务于产品的工具&#xff0c;程序员永远都是在做最后一公里的搬砖&am…

Linux 命令 find 的深度解析与使用

Linux 命令 find 的深度解析与使用 在 Linux 系统中&#xff0c;find 命令是一个功能强大的工具&#xff0c;用于在文件系统中搜索文件或目录。无论是基于文件名、文件类型、文件大小、文件权限&#xff0c;还是基于文件的最后修改时间等&#xff0c;find 命令都能提供灵活的搜…

Windows家庭版 WSL2非C盘详细安装配置与WSL代理设置+WSL基础环境CUDA安装

1 WSL2 配置 1.1 WSL 开启 注意&#xff1a;需要在windows功能中开启“Hyper-V”和“适用于Linux的Windows子系统”功能 但是&#xff01;windows家庭版&#xff08;windows home&#xff09;是默认没有Hyper-V功能的&#xff0c;自己手动安装&#xff1a; 创建一个记事本&a…

前端面试宝典总结4-手搓代码JavaScript(基础版)

前端面试宝典总结4之手写代码JavaScript&#xff08;基础版&#xff09; 本文章 对各大学习技术论坛知识点&#xff0c;进行总结、归纳自用学习&#xff0c;共勉&#x1f64f; 上一篇&#x1f449;: 前端面试宝典总结4-手搓代码JavaScript&#xff08;数据处理&#xff09; 文…

R语言学习 - 柱状图

柱状图绘制 柱状图也是较为常见的一种数据展示方式&#xff0c;可以展示基因的表达量&#xff0c;也可以展示GO富集分析结果&#xff0c;基因注释数据等。这篇转录组工具比较 转录组分析工具哪家强&#xff1f;中就使用到比较多堆积柱状图。 常规矩阵柱状图绘制 有如下4个基…

Audio PsyChat:web端语音心理咨询系统

这是一个在服务器本地运行的web语音心理咨询系统&#xff0c;咨询系统内核使用PsyChat&#xff0c;我们为其制作了Web前端&#xff0c;并拼接了ASR和TTS组件&#xff0c;使局域网内用户可以通过单纯的语音进行交互。其中ASR和TTS组件使用PaddleSpeech API。 使用 使用单卡3090…

信息学奥赛初赛天天练-19-挑战程序阅读-探索因数、所有因数平和、质数的奥秘

PDF文档公众号回复关键字:20240604 1 2023 CSP-J 阅读程序3 阅读程序&#xff08;程序输入不超过数组成字符串定义的范围&#xff1a;判断题正确填√&#xff0c;错误填&#xff1b;除特殊说明外&#xff0c;判断题1.5分&#xff0c;选择题3分&#xff0c;共计40分&#xff…

C++中的静态变量与普通变量

在C中&#xff0c;变量的存储和生命周期可以根据其定义的位置和方式而有所不同。特别是&#xff0c;静态变量&#xff08;无论是静态局部变量还是静态全局变量&#xff09;与普通的全局变量和局部变量在行为和生命周期上有显著的区别。 局部变量 局部变量是在函数内部定义的变…

【微信支付】获取微信开发信息(全网最详细!!!)

前言 1、申请商户号 申请流程与资料 详细申请步骤 申请开通接入微信支付步骤 2、申请微信小程序 申请小程序步骤 查看小程序AppID 3、微信支付普通商户与AppID账号关联 4、获取开发中需要的密钥和证书 4.1、申请证书 4.2、下载证书工具 4.3、证书工具—填写商户信息…

如何进行团队协作

团队协作是项目管理中不可或缺的一部分&#xff0c;它涉及多个团队成员共同工作以达成共同的目标。以下是一些关于如何进行团队协作的建议&#xff1a; 1. 明确目标和角色 设定清晰的目标&#xff1a;确保所有团队成员都清楚了解项目的总体目标以及他们各自在其中的角色和职责…

关于微积分的几个问题回顾

1.定积分求解举例 定积分是微积分中的一个重要概念&#xff0c;用于求解连续函数在某一区间上的面积或体积等问题。下面我将给出一个定积分求解的举例。 假设我们要求解函数 f(x)x2 在区间 [0,1] 上的定积分&#xff0c;即求解 ∫01​x2dx 求解步骤 1. 找出被积函数 f(x) …

3D分割之SAGA训练流程解读

训练之前,会先提取2种特征, 一种是每张图片的image encoding, 它的size是(64,64),代表每个像素处的特征向量。这个向量用于特征匹配(选中的目标和每个像素的相似度)。 一种是SAM提取的所有mask(用于计算mask所在目标的特征向量)。 extract_features.py提取的是SAM模型…