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家政服务预约单开版微信小程序系统源码
🏠 —— 便捷生活，从指尖开始💪 🌈【开篇：家政新风尚，一键触达】 在忙碌的生活节奏中，你是否渴望拥有一个温馨、整洁的家，却又苦于找不到合适的家政服务？现在ÿ…...
UE5 学习系列（二）用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇，在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下： 【Note】：如果你已经完成安装等操作，可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作，重…...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性，不同版本的Docker对内核版本有不同要求。例如，Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本，Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中，时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志，到供应链系统的物流节点时间戳，时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库，其日期时间类型的…...
利用ngx_stream_return_module构建简易 TCP/UDP 响应网关
一、模块概述 ngx_stream_return_module 提供了一个极简的指令： return <value>;在收到客户端连接后，立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量（如 $time_iso8601、$remote_addr 等）&a…...
23-Oracle 23 ai 区块链表（Blockchain Table）
小伙伴有没有在金融强合规的领域中遇见，必须要保持数据不可变，管理员都无法修改和留痕的要求。比如医疗的电子病历中，影像检查检验结果不可篡改行的，药品追溯过程中数据只可插入无法删除的特性需求；登录日志、修改日志…...
循环冗余码校验CRC码 算法步骤+详细实例计算
通信过程：（白话解释） 我们将原始待发送的消息称为 M M M，依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)（意思就是 G （ x ) G（x) G（x) 是已知的）࿰…...
鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/
使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题：docker pull 失败 网络不同，需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计，提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合：各模块职责清晰，便于独立开发…...
rnn判断string中第一次出现a的下标
# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...
基于Java+MySQL实现（GUI）客户管理系统
客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息，对客户进行统一管理，可以把所有客户信息录入系统，进行维护和统计功能。可通过文件的方式保存相关录入数据，对…...