当前位置: 首页 > news >正文

实现 前端框架 SPA 路由功能:Hash 模式与 History 模式的手动实现

前言

在前端框架(如 Vue.js、React 等)中,路由管理通常会配置一个 router 对象来定义 URL 路径与组件的映射关系。

  • 路径(path): 这是浏览器 URL 的一部分,比如 /home/about
  • 组件(component): 这是与该路径相关联的 Vue 组件(或其他框架的组件),如 Home.vueAbout.vue
    代码🌰
import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';
const routes = [{path: '/home',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}
];const router = createRouter({history: createWebHistory(),routes
});export default router;

对于现代开发的项目来说,稍微复杂一点的 SPA ,都需要用到路由。而 vue-router 正是 vue 的路由标配,且 vue-router两种模式hashhistory

Hash模式

hash 模式是一种把前端路由的路径用井号 # 拼接在真实 url 后面的模式。当井号 # 后面的路径发生变化时,浏览器并不会重新发起请求,而是会触发 onhashchange 事件。

使用Hash模式手写实现一个简单的 SPA 路由功能:
创建了两个链接:首页关于。它们分别指向 #/home#/about,这两个链接通过哈希(#)实现路由。

创建了一个 div 元素,ID 为 viewrouter,用于显示根据路由变化而改变的内容。

创建一个 routes 数组,其中包含两个路由对象,每个对象有 pathcomponent 属性。path 是 URL 哈希值,component 是要在视图中显示的内容。

onHashChange 函数会在哈希变化时被调用。它首先打印当前的哈希值。

遍历 routes 数组,检查当前的哈希值是否匹配路由路径。如果匹配,更新 #viewrouterinnerHTML 内容为相应的 component

DOMContentLoaded 事件在初始 HTML 文档被完全加载和解析后触发,这样可以立即显示初始内容。

hashchange 事件在 URL 哈希变化时触发,确保用户点击链接时能够更新视图。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#viewrouter{width:100px;height:100px;background-color: blue;}</style></head><body><a href="#/home">首页</a><a href="#/about">关于</a><div id="viewrouter"></div><script>const router = document.getElementById('viewrouter')const routes = [{path: '#/home',component: '这是首页'},{path: '#/about',component: '<p>这是关于</p>'},]const onHashChange = () => {console.log(location.hash)routes.forEach(item=> {if(item.path ===location.hash){router.innerHTML = item.component}});}window.addEventListener('DOMContentLoaded', onHashChange)window.addEventListener('hashchange',onHashChange)</script></body></html>

请添加图片描述

History模式

history APIH5 提供的新特性,允许开发者直接更改前端路由,即更新浏览器 URL 地址而不重新发起请求

使用History模式手写实现一个简单的 SPA 路由功能
  • routes 数组定义了路由映射关系。每个路由对象包含 path(URL 路径)和 component(显示的内容)。
  • DOMContentLoaded 事件在文档完全加载和解析后触发,onLoad 函数在此时被调用。
  • popstate 事件在浏览器的历史记录条目改变时触发,onPopState 函数在此时被调用。
  • 获取所有导航链接 (<a> 标签),并为每个链接添加点击事件监听器。
  • 点击链接时,调用 e.preventDefault() 阻止默认的浏览器跳转行为。
  • 使用 history.pushState() 方法更新浏览器历史记录,同时改变 URL。
  • 手动调用 onPopState() 更新视图内容。
  • onPopState 函数根据当前 location.pathname 查找匹配的路由。
  • 更新 routeView 元素的 innerHTML 显示对应的组件内容。
通过 history.pushStatepopstate 事件实现了一个简单的前端路由系统:
  • 用户点击导航链接时,更新 URL 并阻止默认行为。
  • 更新浏览器历史记录并根据当前路径显示相应的内容。
  • 处理浏览器的返回按钮等历史记录操作时,重新渲染正确的内容。

请添加图片描述

如果对你有所帮助就点个关注吧,会持续更新文章

相关文章:

实现 前端框架 SPA 路由功能:Hash 模式与 History 模式的手动实现

前言 在前端框架&#xff08;如 Vue.js、React 等&#xff09;中&#xff0c;路由管理通常会配置一个 router 对象来定义 URL 路径与组件的映射关系。 路径&#xff08;path&#xff09;: 这是浏览器 URL 的一部分&#xff0c;比如 /home 或 /about。组件&#xff08;compone…...

去中心化的新时代:Web3技术的全球影响

随着技术的不断演进&#xff0c;Web3正引领互联网的去中心化新时代。相较于传统的Web1和Web2&#xff0c;Web3通过去中心化、区块链和智能合约等技术&#xff0c;正在重塑网络的运作方式。这一变革不仅提升了网络的安全性和透明度&#xff0c;也对全球经济、社会和文化产生了深…...

初始redis:List

列表 List 相当于数组或者顺序表。 对于List来说&#xff0c;两侧都可以插入和删除&#xff0c;时间复杂度是O(1)。 有很多的操作&#xff0c;比如 llen 可以获取List的长度&#xff0c;lrem 可以删除元素 &#xff0c;lrange可以去一个字符串 &#xff0c; lindex可以根据下标…...

Java | Leetcode Java题解之第355题设计推特

题目&#xff1a; 题解&#xff1a; class Twitter {private class Node {// 哈希表存储关注人的 IdSet<Integer> followee;// 用链表存储 tweetIdLinkedList<Integer> tweet;Node() {followee new HashSet<Integer>();tweet new LinkedList<Integer&g…...

MVC与三层架构分层

1. 应用分层 应用分层类似公司的组织架构。我们进行项目开发时&#xff0c;最开始功能简单&#xff0c;前后端放在一起开发&#xff0c;但随着项目功能的复杂&#xff0c;项目会被前端和后端不同的团队接手&#xff0c;甚至更细粒度的团队。甚至后端开发也会根据功能再进行细分…...

Go语言基础--switch

在Go语言中&#xff0c;switch语句是一种非常强大的控制流结构&#xff0c;它允许一个变量的值与多个case进行比较&#xff0c;并根据匹配的结果执行不同的代码块。与C、C或Java中的switch不同&#xff0c;Go语言的switch更灵活&#xff0c;支持没有显式条件的switch&#xff0…...

【数字ic自整资料】AXI握手协议及outstanding

参考资料&#xff1a; ic基础|时序篇&#xff1a;握手协议valid和ready的时序优化_valid和ready握手信号-CSDN博客 https://zhuanlan.zhihu.com/p/365573848 1、AXI握手协议 当我们遇到时序违例时&#xff0c;通常采用的方式为插入寄存器&#xff08;打拍&#xff09;或者是…...

C++ //练习 18.13 什么时候应该使用未命名的命名空间?

C Primer&#xff08;第5版&#xff09; 练习 18.13 练习 18.13 什么时候应该使用未命名的命名空间&#xff1f; 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 解释 当需要将实体限定在特定文件中&#xff0c;并且不会作用于不同文件…...

yum小bug

这个错误是在克隆的机子上安装mysql时&#xff0c;查看有无mysql发现的 [rootwebserve-2 backup] # yum list installed | grep mysql Repository cr is listed more than once in the configuration Repository fasttrack is listed more than once in the configuration 这…...

GDB的基本使用

我有话说 因为时间和精力原因&#xff0c;本文写的虎头蛇尾了&#xff0c;除了启动调试与程序执行以外只有少量截图演示&#xff0c;只是简单的说明。如果有需要可以联系我&#xff0c;我有时间的话会把演示补上&#xff0c;谢谢理解。 启动调试与程序执行 启动调试并传递参数…...

如何利用AI创作高质量的文章

讯飞星火 利用AI创作高质量的文章需要遵循以下步骤&#xff1a; 确定主题和目标受众&#xff1a;在开始写作之前&#xff0c;明确文章的主题和目标受众。这将帮助你确定文章的风格、结构和内容。 收集资料和信息&#xff1a;在撰写文章之前&#xff0c;进行充分的研究&#x…...

开源的量化交易领域平台vn.py(VeighNa)

一&#xff1a;vn.py&#xff08;VeighNa&#xff09;下的工具以及社区版和Elite版的区别 vn.py是一款广泛应用于量化交易领域的开源软件&#xff0c;它主要有以下用途和功能&#xff1a; 1. 交易系统开发框架&#xff1a;vn.py提供了一个完整的交易系统开发框架&#xff0c;可…...

选择搜索引擎进行搜索

<!DOCTYPE html> <html> <head><meta charset"utf-8"><title>选择搜索引擎进行搜索</title><script>function searchSelectedEngine() {var keyword document.getElementById(keyword).value;var engine document.getEl…...

安卓framework修改density

安卓平台,不同屏幕分辨率需要修改density值,以适配UI显示,比如字体大小等. 命令行下进入安卓SDK源码的device/目录 再根据不同芯片厂进入不同目录, 比如展锐就是 cd device/sprd, 高通是device/qcom/搜索关键字"ro.sf.lcd_density", grep -nr “ro.sf.lcd_density”…...

我们如何将数据输入到神经网络中?

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 下面我拿识别美女的例子来给大家介绍如何将美女的图片数据输入到神经网络中。 此例中&#xff0c;待输入的数据是一张图像。为了存储图像…...

基于python模板的药品名称识别系统设计与实现

博主介绍&#xff1a; 大家好&#xff0c;本人精通Java、Python、C#、C、C编程语言&#xff0c;同时也熟练掌握微信小程序、Php和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我有丰富的成品Java、Python、C#毕设项目经验&#xff0c;能够为学生提供各类…...

【第五节】Win32汇编程序设计

目录 一、汇编的第一个“helloworld” 二、汇编中的标号 三、的使用 四、数据定义 五、全局变量 六、局部变量 七、结构体 八、结构体的访问 九、获取变量地址 十、函数 十一、分支与循环 十二、内联汇编 十三、裸函数的使用 一、汇编的第一个“helloworld” .38…...

2.1算法的时间复杂度与空间复杂度

本篇博客介绍算法的时间复杂度与空间复杂度 一、算法效率 算法好坏从时间和空间两个维度衡量 二、时间复杂度 1&#xff0e;概念 时间复杂度是算法中基本操作的执行次数&#xff0c;定量描述了算法的运行时间 2&#xff0e;注意 &#xff08;1&#xff09;时间复杂度是偏…...

Linux VSFTP 部署与配置

一、VSFTP 简介与应用 VSFTP&#xff08;Very Secure FTP Daemon&#xff09;是一款功能强大、安全可靠的FTP服务器软件&#xff0c;广泛应用于Linux/Unix系统中。它提供了高效的文件传输服务&#xff0c;并具备诸多安全特性&#xff0c;如用户认证、权限控制、SSL/TLS加密等。…...

【Docker】Docker Consul

docker consul Docker Consul 是一个用于服务发现和配置的开源工具&#xff0c;它是 HashiCorp 公司推出的一个项目。Consul 提供了一个中心化的服务注册和发现系统&#xff0c;可以帮助开发人员轻松地在 Docker 容器和集群之间进行服务发现和配置管理。 Consul 使用基于 HTT…...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...