vue2 vue-router源码解析

目录

Vue Router 的基本结构和功能

源码分析

一. 编写install 方法

二 .生命变量存储路由信息和当前路由

三 .初始化路由 把路由信息记录在routeMap中

 四.注册router-link 和router-view 组件


Vue Router 的基本结构和功能

  1. 路由器实例(Router 实例):Vue Router 提供了一个 VueRouter 类,用于创建路由器实例。路由器实例通常通过 new VueRouter() 创建,并通过 Vue 实例的 router 选项进行注册。

  2. 路由器插件(Router 插件):Vue Router 提供了一个 install 方法,使其可以作为 Vue.js 插件使用。通过在 Vue 实例上调用 Vue.use(VueRouter),可以在应用程序中全局注册路由器。

  3. 路由表(Route Table):路由表定义了 URL 和组件之间的映射关系。它是一个包含路由配置的 JavaScript 对象或数组,每个路由配置项都定义了一个 URL 匹配规则和对应的组件。

  4. 路由模式(Router Mode):Vue Router 支持多种路由模式,包括 hash 模式、history 模式和 abstract 模式。这些模式决定了 URL 如何与路由器进行交互。

  5. 路由导航(Route Navigation):Vue Router 提供了一组导航方法,用于在不同的 URL 之间进行导航。它包括 router.push()router.replace()router.go() 等方法,以及 <router-link> 组件用于声明式的导航。

  6. 导航守卫(Navigation Guards):Vue Router 提供了一组导航守卫,用于在路由导航过程中执行特定的逻辑。导航守卫包括全局前置守卫、路由独享守卫、组件内的守卫等。

  7. 动态路由和嵌套路由(Dynamic Routing and Nested Routing):Vue Router 支持动态路由和嵌套路由,允许在 URL 中包含动态参数,并且可以在组件中进行嵌套路由的声明。

  8. 路由状态管理(Router State Management):Vue Router 允许在路由器实例中定义和管理全局的路由状态,并通过 $route 对象和 $router 实例提供了访问和修改路由状态的方法。

源码分析

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

由于在使用Router时 使用了Vue.use 并且Router为一个对象所以 Router里有一个install方法

路由的本质就是地址栏的切换渲染不同的内容

首先我们先新建一个vueRouter文件夹 在这个文件夹下新建一个index.js文件 我们对外暴露一个名字为Router的class 然后在里面写一个install方法

export default class  Router{static install(){}
}

一. 编写install 方法

install 方法是默认就加载的我们把初始化逻辑在这里写

第一步判断是否注册过插件 用变量installed来判断

第二步 把vue构造函数记录到全局变量

第三步 混入

路由在每个页面都可以使用 原因就是源码中使用了混入mixin 在beforeCreate生命周期中在每个组件实例创建之前,将路由配置添加到了组件实例中

let _Vue = null;
export default class Router {static install(Vue) {//判断是否注册过插件if (Router.install.installed) {return;}Router.install.installed = true;//把vue构造函数记录到全局变量_Vue = Vue;//混入_Vue.mixin({beforeCreate() {//这里的this.$options是在Vue 2中,this.$options对象包含了创建Vue实例时传递的选项。//当你在Vue实例中使用router选项来配置Vue Router时,它会被保存在this.$options对象中if (this.$options.router) {//把router挂在到_Vue原型上_Vue.prototype.$router = this.$options.router;}},});}
}

二 .生命变量存储路由信息和当前路由

 constructor(options){//记录options信息this.options = options//存储路由信息this.routeMap = {}//记录当前的路由 默认是/this.data = _Vue.observable({current:'/'})}

三 .初始化路由 把路由信息记录在routeMap中

 init(){//初始话路由this.createRouteMap(this.options.routes)}//这个方法里涉及到嵌套路由的遍历createRouteMap(routes){//遍历所有的路由规则包括嵌套路由 存储到routeMap中routes.forEach(route=>{// 判断当前路由是否有path和componentif (route.path && route.component) {// 将path和component作为键值对存储到routeMap中this.routeMap[route.path] = route.component;}// 判断当前路由是否有子路由if (route.children && route.children.length > 0) {// 递归遍历子路由this.createRouteMap(route.children);}}) }

 四.注册router-link 和router-view 组件

router-link 的实质就是一个a标签,我们需要组织默认行为.router-link 跳转的时候是根据to传的参数进行的,参数可以是String或者Object类型 我们进行如下写操作 :

 //注册组件initCompontent(Vue){Vue.component('router-link',{props:{to:[String,Object]},render(h){return h('a',{attrs:{href:this.resolveTo},on:{click:this.clickHandler},},[this.$slots.default])},computed: {resolveTo() {// 判断传入的to是否是对象if (typeof this.to === 'object') {//这里也可以返回path自行判断return this.to.name} else {// to不是对象,直接使用to作为hrefreturn this.to;}},},methods:{clickHandler(e){//阻止默认事件e.preventDefault()if (typeof this.to === 'object') {for (let key in this.to) {if (this.to.hasOwnProperty(key)) {//这里我默认写的是name去匹配 实际逻辑要多一点 history.pushState({}, '', this.to.name + this.to[key] );this.$router.data.current = this.to.name;return}}}//利用history.pushState去改变地址栏的路由 无刷新地向当前history插入一条历使状态history.pushState({},'',this.to)//渲染新的组件this.$router.data.current = this.to  }}})}

这时候在使用router-link 进行跳转时是没有问题的,但是当点击浏览器后退或者前进时,地址栏路径变了,页面却没有渲染出来

原因就是对应的页面没有update,我们还需要监听浏览器的popstate事件

新增方法initEvent 监听popstate事件,然后从新更新页面

 initEvent(){window.addEventListener('popstate',()=>{//监听popstate事件 window.location.pathname获取路由地址复制给current从新渲染新的页面this.data.current = window.location.pathname})}

 在init里调用事件

 //初始化init(){this.createRouteMap(this.options.routes)this.initCompontent(_Vue)this.initEvent()}

在initCompontent方法里面注册router-view组件

 //注册组件initCompontent(Vue){Vue.component('router-link',{props:{to:[String,Object]},render(h){return h('a',{attrs:{href:this.resolveTo},on:{click:this.clickHandler},},[this.$slots.default])},computed: {resolveTo() {// 判断传入的to是否是对象if (typeof this.to === 'object') {return this.to.name} else {// to不是对象,直接使用to作为hrefreturn this.to;}},},methods:{clickHandler(e){//阻止默认事件e.preventDefault()if (typeof this.to === 'object') {for (let key in this.to) {if (this.to.hasOwnProperty(key)) {history.pushState({}, '', this.to.name + this.to[key] );this.$router.data.current = this.to.name;return}}}history.pushState({},'',this.to)this.$router.data.current = this.to  }}})let self = thisVue.component('router-view',{render (h){/这里只是一个简易版本 当有多个router-view时候会出问题const compontent = self.routeMap[self.data.current]return h(compontent)}})}

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

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

相关文章

Vue.js 修饰符:精准控制组件行为

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

多点通信与域套接字:2024/3/4

作业1&#xff1a;广播 发送端&#xff1a; #include <myhead.h> int main(int argc, const char *argv[]) {//1.创建套接字int sfdsocket(AF_INET,SOCK_DGRAM,0);if(sfd-1){perror("socket error");return -1;}printf("sfd%d\n",sfd);//2.设置当前…

蓝桥杯复习之前缀和

题目链接&#xff1a;https://www.luogu.com.cn/problem/P8649 思路&#xff1a; 看到区间和&#xff0c;第一反应肯定是前缀和&#xff0c;我们求出前缀和后对前缀和数组每一个值模k&#xff0c;然后对一个数组的值查看前面有几个相同的&#xff0c;举个例子&#xff1a;…

【python 常见错误】

标题【python 常见错误】 一、python 常见错误 Python编程过程中&#xff0c;开发者可能会遇到多种类型的错误。这些错误大致可以分为三类&#xff1a;语法错误&#xff08;SyntaxError&#xff09;、逻辑错误和运行时错误。下面将详细介绍这几种错误类型&#xff0c;并提供相…

【动态规划】第十一届蓝桥杯省赛第二场C++ C组《数字三角形》(c++)

1.题目描述 上图给出了一个数字三角形。 从三角形的顶部到底部有很多条不同的路径。 对于每条路径&#xff0c;把路径上面的数加起来可以得到一个和&#xff0c;你的任务就是找到最大的和。 路径上的每一步只能从一个数走到下一层和它最近的左边的那个数或者右边的那个数。 …

Pytorch学习 day03(Tensorboard)

Tensorboard Tensorboard能够可视化loss的变化过程&#xff0c;便于我们查看模型的训练状态&#xff0c;也能查看模型当前的输入和输出结果 在Pycharm中&#xff0c;可以通过按住ctrl&#xff0c;并左键点击某个库来进入源文件查看该库的使用方法 SummaryWriter是用来向log_di…

3分钟,学会一个测试员必懂 Lambda 小知识!

今天再来给大家介绍下函数式接口和方法引用。 函数式接口 问&#xff1a;Lambda 表达式的类型是什么&#xff1f; 答&#xff1a;函数式接口 问&#xff1a;函数式接口是什么&#xff1f; 答&#xff1a;只包含一个抽象方法的接口&#xff0c;称为函数式接口 &#xff08;…

Linux服务器磁盘及内存用量监控Python脚本(推送钉钉群通知)

文章目录 Python 脚本钉钉推送通知定时任务 Python 脚本 # -*- coding: utf-8 -*- import subprocessdef get_disk_usage():# 执行 df 命令获取磁盘使用情况df_process subprocess.Popen([df, -h, /], stdoutsubprocess.PIPE)output, _ df_process.communicate()output out…

Lua 篇(一)— 安装运行Hello World

目录 前言一、Lua 是什么&#xff1f;二、Lua和C#的区别三、安装 LuaLinux 系统上安装Mac OS X 系统上安装Window 系统上安装emmyluaRider 安装(推荐) 四、Lua学习资料 前言 Lua 是一种轻量级的嵌入式脚本语言&#xff0c;它可以与 C 语言无缝集成&#xff0c;提供了强大的编程…

YOLOv6-Openvino和ONNXRuntime推理【CPU】

1 环境&#xff1a; CPU&#xff1a;i5-12500 Python&#xff1a;3.8.18 2 安装Openvino和ONNXRuntime 2.1 Openvino简介 Openvino是由Intel开发的专门用于优化和部署人工智能推理的半开源的工具包&#xff0c;主要用于对深度推理做优化。 Openvino内部集成了Opencv、Tens…

库函数和头文件

难道要求平方根也要自己写一个&#xff1f; #include<iostream> #include<cmath>//头文件<cmath>中包含许多数学库函数 using namespace std; int main() {double a;cin>>a;if(a<0) {cout<<"Illegal input"<<endl;return 0;…

PHP语言常见面试题:在PHP中,如何声明变量?变量的作用域是什么?

在PHP中&#xff0c;声明变量非常直接和简单。您只需要在变量名前加上$符号&#xff0c;然后为其分配一个值。这里有一个基本的例子&#xff1a; php复制代码 <?php $variableName "Hello, World!"; // 声明一个名为 $variableName 的变量&#xff0c;并赋值为…

DataGrip 2023:让数据库开发变得更简单、更高效 mac/win

JetBrains DataGrip 2023是一款功能强大的数据库IDE&#xff0c;专为数据库开发和管理而设计。通过DataGrip&#xff0c;您可以连接到各种关系型数据库管理系统(RDBMS)&#xff0c;并使用其提供的一组工具来查询、管理、编辑和开发数据库。 DataGrip 2023软件获取 DataGrip 2…

前端学习第七天-css常用样式设置

达标要求 掌握元素的显示与隐藏 熟练应用溢出的文字隐藏 熟练掌握版心和布局流程 1. 元素的显示与隐藏 在CSS中有三个显示和隐藏的单词比较常见&#xff0c;我们要区分开&#xff0c;他们分别是 display visibility 和 overflow。 他们的主要目的是让一个元素在页面中消失…

94、利用多线程优化卷积运算

上一节简单介绍了多线程的概念,同时也介绍了在使用多线程编程时,对于数据在线程间的切分,应该遵循的一个原则:那就是切分独立的数据快,而不切分有数据依赖的数据块。 最后还抛出了一个问题:对于卷积算法而言,你觉的切分哪个维度最合适呢? 卷积的切分 之前花了很多篇幅…

数据结构从入门到精通——链表

链表 前言一、链表1.1 链表的概念及结构1.2 链表的分类1.3 链表的实现1.4 链表面试题1.5 双向链表的实现 二、顺序表和链表的区别三、单项链表实现具体代码text.htext.cmain.c单链表的打印空间的开辟链表的头插、尾插链表的头删、尾删链表中元素的查找链表在指定位置之前、之后…

LabVIEW齿轮传动健康状态静电在线监测

LabVIEW齿轮传动健康状态静电在线监测 随着工业自动化的不断发展&#xff0c;齿轮传动作为最常见的机械传动方式之一&#xff0c;在各种机械设备中发挥着至关重要的作用。然而&#xff0c;齿轮在长期运行过程中易受到磨损、变形等因素影响&#xff0c;进而影响整个机械系统的稳…

日常工作总结

日常工作总结 1000. JAVA基础1. 泛型1.1 泛型和Object的区别 1100. Spring1. 常用注解1.1 ControllerAdvice注解1.2 缓存Cacheable 2. 常用方法2.1 BeanUtils.copyProperties的用法 3. 常用功能组件3.1 过滤器Filter 2000. Linux应用 1000. JAVA基础 1. 泛型 1.1 泛型和Objec…

【爬虫实战】——Python爬取天气信息

&#x1f349;CSDN小墨&晓末:https://blog.csdn.net/jd1813346972 个人介绍: 研一&#xff5c;统计学&#xff5c;干货分享          擅长Python、Matlab、R等主流编程软件          累计十余项国家级比赛奖项&#xff0c;参与研究经费10w、40w级横向 文…

大模型推荐落地啦!融合知识图谱,蚂蚁集团发布!

引言&#xff1a;电商推荐系统的新突破 随着电子商务平台的蓬勃发展&#xff0c;推荐系统已成为帮助用户在信息过载时代中筛选和发现产品的关键工具。然而&#xff0c;传统的推荐系统主要依赖历史数据和用户反馈&#xff0c;这限制了它们在新商品推出和用户意图转变时的有效性…