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.路由的三种模式

 

 

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

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

相关文章

9.x86游戏实战-汇编指令mov

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 工具下载&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1rEEJnt85npn7N38Ai0_F2Q?pwd6tw3 提…

商务视频推广8个增加用户转化率的技巧-华媒舍

商务视频推广是一种有效的营销策略&#xff0c;可以帮助企业吸引更多的潜在客户并增加用户转化率。我们将介绍8个提高商务视频推广效果的技巧&#xff0c;帮助您更好地利用视频来促进业务增长。 技巧一&#xff1a;制作高质量的内容 成功的商务视频推广首先要有高质量的内容。…

配置jupyter时出现问题?怎么办?

在自己创建的虚拟环境&#xff08;nmjpytorch&#xff09;安装完jupyter&#xff0c;没有跳转到链接&#xff0c;问题如图&#xff1a; 解决方法&#xff1a; 1、查看自己的tornado版本为5.1.1&#xff0c;坑太高了&#xff0c;降低版本为4.5.3 2、卸载tornado-5.1.1 3、安装t…

CS算法(二)—— 斜视SAR点目标仿真

SAR成像专栏目录 我们按照Cumming教授所著的《合成孔径雷达成像——算法与实现》7.6节的点目标参数进行仿真,斜视角设置为8,中心斜距改为1000km。先放最终的仿真结果: 1. 参数配置 在中心点和中心的的上下左右方向设置5个点目标 : function para=config_sar_para_cumming(…

改机软件有哪些?实现一键新机、改串号、改IMEI和手机参数的需求 硬改手机软件,新机环境模拟 设备伪装,一键改机,一键复原

这次针对可以直接开端口修改参数的机型做一些工具解析 前面接触合作过很多工作室。其中很多工作室对于各自软件的跳验证有各自的需求。 一个机型各项参数一般有IMEI WiFi 蓝牙 sn psb ESN等等。 针对这些参数的修改首先要明白各自软件检测的具体是哪些参数来验证。 对于常用…

#数据结构 笔记三

二叉树 1. 概念 二叉树Binary Tree是n个结点的有限集合。它或者是空集n0&#xff0c;或者是由一个根结点以及两颗互不相交、分别称为左子树和右子树的二叉树组成。 二叉树与普通有序树不同&#xff0c;二叉树严格区分左子和右子&#xff0c;即使只有一个子结点也要区分左右。…

Spring MVC 中 使用 RESTFul 实现用户管理系统

1. Spring MVC 中 使用 RESTFul 实现用户管理系统 文章目录 1. Spring MVC 中 使用 RESTFul 实现用户管理系统2. 静态页面准备2.1 user.css2.2 user_index.html2.3 user_list.html2.4 user_add.html2.5 user_edit.html 3. SpringMVC环境搭建3.1 创建module&#xff1a;usermgt3…

3个让你爽到爆炸的学习工具

We OCR WeOCR 是一个基于浏览器的文字识别工具&#xff0c;用户可以通过上传图片来识别其中的文本信息。它是一个渐进式网络应用程序&#xff08;PWA&#xff09;&#xff0c;可以在浏览器中离线使用。WeOCR 是开源的&#xff0c;并且基于 Tesseract OCR 引擎开发。用户无需在本…

STM32第十二课:ADC检测烟雾浓度(MQ2)

文章目录 需求一、MQ-2 气体传感器特点应用电路及引脚 二、实现流程1.开时钟&#xff0c;分频&#xff0c;配IO2.配置ADC的工作模式3.配置通道4.复位&#xff0c;AD校准5.数值的获取 需求实现总结 需求 使用ADC将MQ2模块检测到的烟雾浓度模拟量转化为数字量。 最后&#xff0c…

MySQL内存使用率高且不释放问题排查与总结

背景 生产环境mysql 5.7内存占用超过90%以上&#xff0c;且一直下不来。截图如下&#xff1a; 原因分析 1、确定mysql具体的占用内存大小&#xff0c;通过命令&#xff1a;cat /proc/Mysql进程ID/status查看 命令执行后的结果比较多&#xff08;其他参数的含义想了解可参考这…

【Django】网上蛋糕项目商城-首页

概念 本文在上一文章搭建完数据库&#xff0c;以及创建好项目之后&#xff0c;以及前端静态文件后&#xff0c;对项目的首页功能开发。 后端代码编写 在views.py文件中创建方法&#xff0c;连接数据库&#xff0c;并获取首页需要的数据 def getGoodsList(type):# 获取所有横…

Python学生信息管理系统(完整代码)

引言&#xff1a;&#xff08;假装不是一个大学生课设&#xff09;在现代教育管理中&#xff0c;学生管理系统显得尤为重要。这种系统能够帮助教育机构有效地管理学生资料、成绩、出勤以及其他教育相关活动&#xff0c;从而提高管理效率并减少人为错误。通过使用Python&#xf…

Winform使用HttpClient调用WebApi的基本用法

Winform程序调用WebApi的方式有很多&#xff0c;本文学习并记录采用HttpClient调用基于GET、POST请求的WebApi的基本方式。WebApi使用之前编写的检索环境检测数据的接口&#xff0c;如下图所示。 调用基于GET请求的无参数WebApi 创建HttpClient实例后调用GetStringAsync函数获…

什么是单例模式?

前言&#x1f440;~ 上一章我们介绍了多线程下引发的安全问题&#xff0c;今天接着讲解多线程的内容&#xff0c;同样很重要&#xff0c;请细品 单例模式 饿汉模式 懒汉模式 饿汉模式和懒汉模式的区别 再遇线程不安全问题 指令重排序问题 如果各位对文章的内容感兴趣的话…

学习笔记(linux高级编程)11

进程间通信 》信号通信 应用&#xff1a;异步通信。 中断&#xff0c;&#xff0c; 1~64&#xff1b;32应用编程。 如何响应&#xff1a; Term Default action is to terminate the process. Ign Default action is to ignore the signal. wait Core Default action is …

ffmpeg将多个yuv文件编码为MP4视频文件

一、编码方案 在视频录制时&#xff0c;每一帧保存为一个yuv文件&#xff0c;便于纠错和修改。在编码为MP4文件时&#xff0c;我的方案是将所有yuv文件先转码为单个MP4文件&#xff0c;然后使用ffmpeg的concat功能拼接为完整的视频。 二、shell脚本 #!/bin/bash# 检查参数数量…

【Arduino】ESP8266开发环境配置(图文)

ESP8266与ESP32开发很类似&#xff0c;相当于是低配版本的ESP32&#xff0c;其同样具有无线网络连接能力&#xff0c;功能强大&#xff0c;而且价格比ESP32更具有优势。接下来我们就来设置一下ESP8266的开发环境。 使用Arduino开发平台软件&#xff0c;选择首选项进行设置。 h…

【C++】 ——【模板初阶】——基础详解

目录 1. 泛型编程 1.1 泛型编程的概念 1.2 泛型编程的历史与发展 1.3 泛型编程的优势 1.4 泛型编程的挑战 2. 函数模板 2.1 函数模板概念 2.2 函数模板格式 2.3 函数模板的原理 2.4 函数模板的实例化 2.5 模板参数的匹配原则 2.6 函数模板的特化 2.7 函数模板的使…

事务底层与高可用原理

1.事务底层与高可用原理 事务的基础知识 mysql的事务分为显式事务和隐式事务 默认的事务是隐式事务 显式事务由我们自己控制事务的开启&#xff0c;提交&#xff0c;回滚等操作 show variables like autocommit; 事务基本语法 事务开始 1、begin 2、START TRANSACTION&…

MySQL数据恢复(适用于误删后马上发现)

首先解释一下标题&#xff0c;之所以适用于误删后马上发现是因为太久了之后时间和当时操作的数据表可能会记不清楚&#xff0c;不是因为日志丢失 1.首先确保自己的数据库开启了binlog&#xff08;我的是默认开启的我没有配置过&#xff09; 根据这篇博客查看自己的配置和自己…