React和Vue 中的 router 实现原理如何

React 和 Vue 中的路由器(Router)实现原理类似,都是基于监听 URL 变化,然后根据不同的 URL 加载相应的组件或页面。下面是它们的一般实现原理:

React Router 实现原理:

  • History API: React Router 使用 HTML5 History API(pushState() 和 replaceState() 方法)来操作浏览器的历史记录,从而实现无刷新页面的路由切换。

  • 监听 URL 变化: React Router 会监听浏览器 URL 的变化,一般通过 popstate 事件来监听 URL 的改变。

  • 路由匹配:当 URL 变化时,React Router 会根据路由配置文件(通常是一个 JavaScript 对象)匹配对应的路由规则,找到需要渲染的组件。

  • 组件渲染: 匹配到对应的路由后,React Router 会渲染对应的组件到页面上,实现页面的更新。

    React Router 实现举例

    
    // Home.js
    const Home = () => <div>Home Page</div>;// Profile.js
    const Profile = () => <div>User Profile Page</div>;// Messages.js
    const Messages = () => <div>Messages Page</div>;// App.js
    import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';const App = () => (<Router><Switch><Route path="/" exact component={Home} /><Route path="/profile" component={Profile} /><Route path="/messages" component={Messages} /></Switch></Router>
    );// Navigation.js
    import { Link } from 'react-router-dom';const Navigation = () => (<nav><Link to="/">Home</Link><Link to="/profile">Profile</Link><Link to="/messages">Messages</Link></nav>
    );

Vue Router 实现原理:
  • Vue Router 实例化: 在 Vue 应用中,通过实例化 Vue Router 来创建路由器,一般会在根组件中使用 Vue Router。

  • 监听 URL 变化:Vue Router 使用浏览器的 hashchange 事件或者 HTML5 History API 来监听 URL 变化。

  • 路由匹配:当 URL 变化时,Vue Router 会根据路由配置文件中定义的路由规则,匹配到对应的路由。

  • 组件渲染:匹配到对应的路由后,Vue Router 会渲染对应的组件到页面上,实现页面的更新。

共同点:

  • 声明式路由配置: React Router 和 Vue Router 都支持声明式的路由配置,即通过配置文件(或者组件注解)来定义路由规则,使得路由配置更加清晰和易于维护。

  • 组件式路由导航:React Router 和 Vue Router 都支持通过组件来实现路由导航,例如 组件(React Router)和 组件(Vue Router)。

  • Hash模式

    • hash模式是vue-router的默认路由模式,它的标志是在域名之后带有一个#

    • 可以通过window.location.hash获取到当前url的hash;

    • hash模式下,当URL中的哈希值发生变化时,浏览器会触发hashchange事件,Vue监听这个事件进行路由切换,Vue路由会根据URL中的哈希值匹配路由配置,找到相应组件进行渲染。

    • Hash模式的特点:

      1. 兼容性好

      2. hash变化会在浏览器的history中增加一条记录,可以实现浏览器的前进和后退功能。

    1. Hash模式的缺点:由于会在后边加一个#,影响美观。

  • History模式

    • History模式是基于html5的history对象。

    • 通过location.pathname获取到当前url的路由地址;

    • history模式下,通过pushState和replaceState方法改变浏览器地址栏的URL,同时不刷新页面,当URL发生变化时,浏览器会触发popstate事件,然后Vue监听该事件进行相应的路由切换,Vue路由会根据URL匹配路由配置,找到对应的组件进行渲染。

    • History模式特点:

      1. 方便

      2. 可读性强

      3. 更加美观

    1. History模式缺点:用户刷新或直接输入地址会向服务器发送请求;需要服务器端支持。

  • 实现步骤:

    1. 安装并使用插件

    2. 创建router实例

    3. 在根组件上添加实例

    4. 添加路由视图

    5. 导航 使用router-link

  • router-view 组件与路由渲染

    1. 通过Vue.observable在router实例上创建一个保存当前路由的监控对象current。

    2. 当浏览器地址发生变化时,修改监控对象current

    3. 在router-view组件中监听监控对象current的变化,当current变化后,获取用户注册的相应component,并利用h函数将component渲染成vnodes,进而更新页面视图。

  • Router-link 组件与路由跳转

    • Router-link组件通过参数to设置目标路由,tag参数负责组件在页面上渲染的标签,默认为a标签,replace参数则负责控制在路由跳转时是否使用replace方法。

Vue Router 实现举例:


<!-- Home.vue -->
<template><div>Home Page</div>
</template><script>
export default {// component definition
};
</script><!-- Profile.vue -->
<template><div>User Profile Page</div>
</template><script>
export default {// component definition
};
</script><!-- Messages.vue -->
<template><div>Messages Page</div>
</template><script>
export default {// component definition
};
</script>

// router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import Profile from './views/Profile.vue';
import Messages from './views/Messages.vue';Vue.use(Router);export default new Router({routes: [{ path: '/', component: Home },{ path: '/profile', component: Profile },{ path: '/messages', component: Messages }]
});

<!-- Navigation.vue -->
<template><nav><router-link to="/">Home</router-link><router-link to="/profile">Profile</router-link><router-link to="/messages">Messages</router-link></nav>
</template><script>
export default {// component definition
};
</script>

总的来说,React Router 和 Vue Router 的实现原理都是基于监听 URL 变化,根据配置的路由规则匹配对应的组件并进行渲染,从而实现页面之间的无刷新切换。两者的具体实现细节有所不同,但整体思路是相似的。

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

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

相关文章

【Linux】程序地址空间 -- 详解 Linux 2.6 内核进程调度队列 -- 了解

一、程序地址空间回顾 在学习 C/C 时&#xff0c;我们知道内存会被分为几个区域&#xff1a;栈区、堆区、全局/静态区、代码区、字符常量区等。但这仅仅是在语言层面上的理解&#xff0c;是远远不够的。 如下空间布局图&#xff0c;请问这是物理内存吗&#xff1f; 不是&…

【共享目录讲解】

共享目录讲解 1. 介绍2. 文件系统和网络3. 创建共享目录的步骤4. 回归共享目录概念的主要要素5. 实际应用6. 技术的限制和考虑 1. 介绍 共享目录&#xff08;Shared Directory&#xff09;是在计算机网络中使得不同用户和不同计算机可以访问同样数据集的一个特性。这通常用于本…

Acwing 周赛143 解题报告 | 珂学家 | 状压DP

前言 整体评价 被这个T2难住了, 幸好最后磨出来了&#xff0c;感觉蛮头痛的。T3是道状压题&#xff0c;这个反而容易写。 A. 时间 思路: 模拟 取模&#xff0c;但是对0要改成12 n int(input())r n % 12print (12 if r 0 else r)B. 数对推理 思路: 按题意模拟 如果一组…

【Linux】指令 【scp】

scp 是一条用于安全复制文件的命令。 scp hadoop.tar.gz datanode:/software这条命令的含义是将本地的hadoop.tar.gz文件复制到远程主机datanode的/software目录下。 scp&#xff1a;这是Secure Copy的缩写&#xff0c;用于在主机之间安全地复制文件。hadoop.tar.gz&#xff…

C++运算符重载(日期类的运算符重载为例)

一、运算符重载简介 C为了增强代码的可读性&#xff0c;引入了运算符重载。 运算符重载是一个拥有特殊函数名的函数&#xff0c;其函数名为 operator重载的运算符&#xff0c;其余的返回值类型和参数列表与普通函数类似。调用时可以使用函数名调用&#xff0c;也可以直接使用…

Kubernetes 元信息与控制器模型

一、资源元信息&#xff1a; Kubernetes 的资源对象组成&#xff1a;主要包括了 Spec、Status 和元数据。其中 Spec 部分用来描述期望的状态&#xff0c;Status 部分用来描述观测到的状态。 元数据主要包括了&#xff1a;Labels 用来识别资源的标签&#xff1b;Annotations 用…

EasyUI动态加载组件

要实现如下的效果&#xff0c;在表格中显示进度条 主要是需要再次初始化组件&#xff0c;借用ChatGPT的意思是&#xff1a; 在许多 JavaScript UI 框架中&#xff0c;包括 EasyUI&#xff0c;在动态地创建或插入新的 DOM 元素后&#xff0c;通常需要手动初始化相关的组件或特性…

DPU技术的进步:赋予未来创新力量

随着云计算和虚拟化技术的发展&#xff0c;网卡在功能和硬件结构方面也经历了四个阶段&#xff0c;即网卡、智能网卡、基于FPGA的DPU和DPU SoC网卡。本文将重点介绍这些不同类型的网络适配器和处理器&#xff0c;在硬件、可编程能力、开发和应用方面的特点。 网卡的演进和应用…

第四节笔记:XTuner 大模型单卡低成本微调实战

视频链接&#xff1a;https://www.bilibili.com/video/BV1yK4y1B75J/?spm_id_from333.788&vd_source3bbd0d74033e31cbca9ee35e111ed3d1 课程笔记&#xff1a; 1.Finetune简介 指令微调&#xff1a; 开始的大模型可能不知道问的是问题 这三种角色的划分只有在微调训练阶…

LeetCode、452. 用最少数量的箭引爆气球【中等,贪心,区间问题】

文章目录 前言LeetCode、452. 用最少数量的箭引爆气球【中等&#xff0c;贪心&#xff0c;区间问题】题目链接与分类思路贪心&#xff0c;连续区间数量问题 资料获取 前言 博主介绍&#xff1a;✌目前全网粉丝2W&#xff0c;csdn博客专家、Java领域优质创作者&#xff0c;博客…

Unity 减低GC和优化

文章目录 在Unity中&#xff0c;垃圾收集&#xff08;Garbage Collection, GC&#xff09;是一项重要的内存管理机制&#xff0c;但过度的GC活动可能会导致性能瓶颈。优化Unity项目中的GC涉及减少不必要的对象分配和生命周期管理。以下列举了五个实例来详细说明如何降低GC负担并…

数学建模【线性规划】

一、线性规划简介 线性规划通俗讲就是“有限的资源中获取最大的收益”&#xff08;优化类问题&#xff09;。而且所有的变量关系式都是线性的&#xff0c;不存在x、指数函数、对数函数、反比例函数、三角函数等。此模型要优化的就是在一组线性约束条件下&#xff0c;求线性目标…

java 课程签到管理系统Myeclipse开发mysql数据库web结构jsp编程servlet计算机网页项目

一、源码特点 java 课程签到管理系统是一套完善的java web信息管理系统 采用serlvetdaobean&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#xff0…

飞天使-k8s知识点20-kubernetes实操5-pod更新与暂停-statefulset

文章目录 资源调度 Deployment&#xff1a;扩缩容资源调度 Deployment&#xff1a;更新的暂停与恢复资源调度 StatefulSet&#xff1a;定义一个有状态服务headless service 金丝雀发布 资源调度 Deployment&#xff1a;扩缩容 扩容和缩容&#xff0c;常用的功能 scale[rootkub…

C++11---lambda表达式

lambda表达式 lambda表达式概念lambda表达式语法lambda表达式各部分说明 lambda表达式交换两个数lambda表达式底层原理lambda表达式的底层原理 lambda表达式之间不能相互赋值 lambda表达式概念 lambda表达式是一个匿名函数&#xff0c;恰当使用lambda表达式可以让代码变得简洁…

企业计算机服务器中了faust勒索病毒怎么办?Faust勒索病毒解密数据恢复

网络技术的不断发展与更新&#xff0c;为企业的生产运营提供了极大便利&#xff0c;但也为企业的数据安全埋下隐患。近期&#xff0c;云天数据恢复中心接到很多企业的求助&#xff0c;企业的计算机服务器遭到了faust勒索病毒攻击&#xff0c;给企业的生产运营带来了极大困扰&am…

matlab中mosek安装教程

MOSEK数学优化软件包&#xff08;Mosek Optimization Tools&#xff09; 是一款MOSEK优化软件包&#xff0c;是一款用来解决大规模级别数学优化问题的软件。MOSEK提供了特定解决线性编程、混合整数编程以及其它非线性转换优化问题。 mosek安装教程 ①去官网https://www.mosek…

信息学奥赛一本通1177:奇数单增序列

1177&#xff1a;奇数单增序列 时间限制: 1000 ms 内存限制: 65536 KB 提交数: 56645 通过数: 29059 【题目描述】 给定一个长度为N&#xff08;不大于500&#xff09;的正整数序列&#xff0c;请将其中的所有奇数取出&#xff0c;并按升序输出。 【输入】 第1行为…

【研究生复试】计算机软件工程人工智能研究生复试——资料整理(速记版)——数据库

1、JAVA 2、计算机网络 3、计算机体系结构 4、数据库 5、计算机租场原理 6、软件工程 7、大数据 8、英文 自我介绍 4. 数据库 1. B树相对于B树的区别及优势 B树中有重复元素&#xff0c;B树没有重复元素B树种每个节点都存储了key和data&#xff0c;B树内节点去掉了其中指向数…

【C++11】:unordered系列关联式容器

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关unordered系列关联式容器的知识点&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;…