Vue2-Vue Router前端路由实现思路
1.路由是什么？
Router路由器：数据包转发设备，路由器通过转发数据包（数据分组）来实现网络互连
Route路由：数据分组从源到目的地时，决定端到端路径的网络范围的进程 | - 网络层
Distribute分发：数据包或任务根据规则，分配到不同的路径
Default Route默认路由：路由表中没有匹配的路由时，默认显示的路由
Fallback Routing404路由/保底路由：匹配所有处理未定义或未找到路由请求的特殊路由
Nested Routing嵌套路由：一个路由组件内部定义其他路由组件，形成父子结构的路由
Routing Table路由表：存储到各个目的地的最佳路径的表，引导分组转送 | - 对象
#原生js实现路由/* index.html */
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Test Router</title></head>
<body><section><a href="#1">page 1</a><br/><a href="#2">page 2</a><br/><a href="#3">page 3</a><br/><a href="#4">page 4</a><br/></section><div id="app"></div><div id="div1" style="display: none">1</div><div id="div2" style="display: none">2</div><div id="div3" style="display: none">3</div><div id="div4" style="display: none">4</div><div id="div404" style="display: none"><span>404</span><hr/><span>Not found</span></div><script src="./src/main.js"></script>
</body>
</html><style>a{color: blueviolet;text-decoration: none;}#app{background: pink;font-size: 32px;}#div404{text-align: center;}
</style>/* main.js 实现不同路由匹配不同页面 */function route(){/* 获取hash */let hash=window.location.hashlet number=hash.substr(1) || '1'console.log(hash,number)/* 获取并显示当前哈希匹配的div */let div=document.querySelector(`#div${number}`)if (div) {div.style.display = "block";let app = document.querySelector('#app');app.appendChild(div);}else{/* 保底路由404 */div = document.querySelector(`#div404`)div.style.display = "block";document.querySelector("body").appendChild(div);}
}
route()window.addEventListener("hashchange",()=>{/* 隐藏所有div */let allDivs = document.querySelectorAll('[id^="div"]');allDivs.forEach(div => div.style.display = "none");/* 更新路由匹配 */route()
})2.路由的三种模式
相关文章：
Vue2-Vue Router前端路由实现思路
1.路由是什么？ Router路由器：数据包转发设备，路由器通过转发数据包（数据分组）来实现网络互连 Route路由：数据分组从源到目的地时，决定端到端路径的网络范围的进程 | - 网络层 Distribute分发…...
2024 年 亚太赛 APMCM （C题）中文赛道国际大学生数学建模挑战赛 | 量子计算的物流配送 | 数学建模完整代码+建模过程全解全析
当大家面临着复杂的数学建模问题时，你是否曾经感到茫然无措？作为2022年美国大学生数学建模比赛的O奖得主，我为大家提供了一套优秀的解题思路，让你轻松应对各种难题！ 完整内容可以在文章末尾领取！ 该段文字…...
客观分析-自己和本科学生之间的差距
进入专科学校和与985、211等重点本科院校学生之间的差距可能由多种因素造成，这些因素可能包括但不限于： 1. **入学标准**： 985和211工程院校通常有更高的入学标准和更严格的选拔过程。 你得使你自己适应更高的入学标准和更严格的选拔过程&am…...
清华镜像源
python在安装各种库的时候为了下载速度快，经常使用镜像源，下面是使用清华镜像源案例。其中的 xxx 表示要安装的库，如 requests。 pip install xxx -i https://pypi.tuna.tsinghua.edu.cn/simple 安装requests案例：pip install r…...
大语言模型测评工具-ChatHub和ChatAll
背景 现在国内外拥有上百个大语言模型，在AI业务中，我们需要在其中选择一个合适业务模型，就需要对这些模型进行测试。手工去测试这么多模型效率一定不高，今天就介绍两个提高测评模型效率的工具 ChatHub和ChatAll。 介绍 ChatHub…...
使用redis分布式锁，不要把锁放在本地事务内部
在使用分布式锁的时候,习惯性的尽量缩小同步代码块的范围。 但是如果数据库隔离级别是可重复读,这种情况下不要把分布式锁加在Transactional注解的事务方法内部。 因为可能会出现这种情况： 线程1开启事务A后获取分布式锁,执行业务代码后在事务内释放了分布式锁。…...
Python学生信息管理系统（完整代码）
引言：（假装不是一个大学生课设）在现代教育管理中，学生管理系统显得尤为重要。这种系统能够帮助教育机构有效地管理学生资料、成绩、出勤以及其他教育相关活动，从而提高管理效率并减少人为错误。通过使用Python…...
【大功率汽车大灯升压方案】LED恒流驱动芯片FP7208升压车灯调光应用，PWM内部转模拟，调光深度1%，无频闪顾虑，低亮无抖动
文章目录 前言 一、LED车灯的内部组成结构 二、驱动板详解 三、FP7208芯片介绍 芯片参数 总结 前言 近年来，汽车市场飞速发展，车灯作为汽车重要的组成部分，也得到了广泛的关注。车灯对于汽车不仅是外观件更是汽车主动安全的重要组成部…...
uniapp应用如何实现传感器数据采集和分析
UniApp是一种跨平台的应用开发框架，它支持在同一份代码中同时开发iOS、Android、H5等多个平台的应用。在UniApp中实现传感器数据采集和分析的过程可以分为以下几个步骤： 引入相关插件或库 UniApp通过插件或库的形式扩展功能。对于传感器数据采集和分析&…...
读书笔记-Java并发编程的艺术-第3章(Java内存模型)-第6节(final域的内存语义)
文章目录 3.6 final域的内存语义3.6.1 final 域的重排序规则3.6.2 写final 域的重排序规则3.6.3 读final 域的重排序规则3.6.4 final 域为引用类型3.6.5 为什么 final 引用不能从构造函数内“逸出”3.6.6 final 语义在处理器中的实现3.6.7 JSR-133 为什么要增强final 的语义 3.…...
Spring AI 1.0.0 新变化，从 0.8.1 如何升级
Spring AI 1.0.0-M1 版本已经发布，距离 1.0.0 正式版又更近了一步。同时这也意味着，Spring AI 1.0.0 的 API 已经基本确定，不会发生大的改动。这里介绍一下，相对于上一个发布版本 0.8.1，Spring AI 1.0.0 的一些重要的变…...
【机器学习】FFmpeg+Whisper：二阶段法视频理解（video-to-text）大模型实战
目录 一、引言 二、FFmpeg工具介绍 2.1 什么是FFmpeg 2.2 FFmpeg核心原理 2.3 FFmpeg使用示例 三、FFmpegWhisper二阶段法视频理解实战 3.1 FFmpeg安装 3.2 Whisper模型下载 3.3 FFmpeg抽取视频的音频 3.3.1 方案一：命令行方式使用ffmpeg 3.3.2 方案二&a…...
Java中继承接口和实现接口的区别、接口和抽象类的区别、并理解关键字interface、implements
初学者容易把继承接口和实现接口搞混，专门整理一下，顺便简单介绍一下interface、implements关键字。 继承接口和实现接口的区别、接口的特点 继承接口是说的只有接口才可以继承接口，是接口与接口间的。实现接口是说的接口与类之间ÿ…...
Excel为数据绘制拆线图,并将均值线叠加在图上,以及整个过程的区域录屏python脚本
Excel为数据绘制拆线图,并将均值线叠加在图上,以及整个过程的区域录屏python脚本 1.演示动画A.视频B.gif动画 2.跟踪鼠标区域的录屏脚本 Excel中有一组数据,希望画出曲线,并且能把均值线也绘制在图上,以下动画演示了整个过程,并且提供了区域录屏脚本,原理如下: 为节约空间,避免…...
易保全推动区块链应用与AI融合创新发展
数字化时代，区块链和人工智能技术作为当下两大“黑科技”，两者的深度结合，正在为企业数字化转型带来前所未有的机遇。 易保全作为国内权威的电子数据存证保全机构，积极探索两者的融合之道，将区块链的去中心化、不可篡…...
C++(Python)肥皂泡沫普拉托边界膜曲面模型算法
🎯要点 🎯肥皂泡二维流体模拟 | 🎯泡沫普拉托边界膜曲面模型算法演化厚度变化 | 🎯螺旋曲面三周期最小结构生成 📜皂膜用例：Python计算物理粒子及拉格朗日和哈密顿动力学 | Python和MATLAB粘性力接触力动…...
VBA打开其他Excel文件
前言 本节会介绍通过VBA实现打开其他excel文件，包括模糊匹配文件名称、循环同时打开多个文件，并获取工作表及工作簿进行数据操作后，对打开的文件进行保存并关闭操作。 一、打开固定文件名称的文件 场景说明： 1.新建一个宏文件VBA…...
模拟 ADC 的前端
ADC 的 SPICE 模拟 反复试验的方法将信号发送到 ADC 非常耗时，而且可能有效也可能无效。如果转换器捕获电压信息的关键时刻模拟输入引脚不稳定，则无法获得正确的输出数据。SPICE 模型允许您执行的步是验证所有模拟输入是否稳定，以便没有错误…...
tls各个版本的安全性介绍
TLS（Transport Layer Security）协议的各个版本在安全性方面经历了逐步的演进和改进，以应对不断变化的网络安全威胁。以下是各主要版本的安全性概览： TLS 1.0： 发布于1999年，是SSL 3.0的后续版本。在其发布时…...
PHP家政服务预约单开版微信小程序系统源码
🏠 —— 便捷生活，从指尖开始💪 🌈【开篇：家政新风尚，一键触达】 在忙碌的生活节奏中，你是否渴望拥有一个温馨、整洁的家，却又苦于找不到合适的家政服务？现在ÿ…...
大话软工笔记—需求分析概述
需求分析，就是要对需求调研收集到的资料信息逐个地进行拆分、研究，从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要，后续设计的依据主要来自于需求分析的成果，包括: 项目的目的…...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了：一行…...
` 方法)
深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法
深入浅出：JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中，随机数的生成看似简单，却隐藏着许多玄机。无论是生成密码、加密密钥，还是创建安全令牌，随机数的质量直接关系到系统的安全性。Jav…...
初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...
C++.OpenGL （14/64）多光源（Multiple Lights）
多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...
初探Service服务发现机制
1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能：服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源…...
力扣热题100 k个一组反转链表题解
题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...
MySQL基本操作（续）
第3章：MySQL基本操作（续） 3.3 表操作 表是关系型数据库中存储数据的基本结构，由行和列组成。在MySQL中，表操作包括创建表、查看表结构、修改表和删除表等。本节将详细介绍这些操作。 3.3.1 创建表 在MySQL中&#…...
java 局域网 rtsp 取流 WebSocket 推送到前端显示 低延迟
众所周知 摄像头取流推流显示前端延迟大 传统方法是服务器取摄像头的rtsp流 然后客户端连服务器 中转多了，延迟一定不小。 假设相机没有专网 公网 1相机自带推流 直接推送到云服务器 然后客户端拉去 2相机只有rtsp ，边缘服务器拉流推送到云服务器 …...
Oracle实用参考（13）——Oracle for Linux物理DG环境搭建（2）
13.2. Oracle for Linux物理DG环境搭建 Oracle 数据库的DataGuard技术方案，业界也称为DG，其在数据库高可用、容灾及负载分离等方面，都有着非常广泛的应用，对此，前面相关章节已做过较为详尽的讲解，此处不再赘述。 需要说明的是， DG方案又分为物理DG和逻辑DG，两者的搭建…...