当前位置: 首页 > 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…...

保姆级避坑指南:在Ubuntu 22.04上为ROS2 Humble编译OpenCV 4.2.0和cv_bridge

深度解析&#xff1a;Ubuntu 22.04下ROS2 Humble与OpenCV 4.2.0的精准版本匹配实战 当视觉SLAM遇上ROS2生态&#xff0c;版本依赖就像一场精密的外科手术。本文将带你穿透ORB-SLAM3等视觉算法与ROS2 Humble环境整合时的核心痛点——特别是OpenCV 4.2.0与cv_bridge的版本锁定机…...

避开这些坑!FFmpeg.wasm在Vue项目中的完整避坑指南(含SharedArrayBuffer报错解决方案)

FFmpeg.wasm在Vue项目中的深度实践与疑难解析 当现代Web应用需要处理音视频编辑、转码或流媒体时&#xff0c;FFmpeg.wasm正成为前端开发者的利器。本文将深入探讨如何在高安全要求的Vue项目中稳定集成这一技术方案&#xff0c;特别针对生产环境中可能遇到的SharedArrayBuffer限…...

暗黑破坏神2重制版智能辅助:自动化流程与效率提升完全指南

暗黑破坏神2重制版智能辅助&#xff1a;自动化流程与效率提升完全指南 【免费下载链接】botty D2R Pixel Bot 项目地址: https://gitcode.com/gh_mirrors/bo/botty 在《暗黑破坏神2&#xff1a;重制版》的冒险旅程中&#xff0c;你是否曾因重复刷怪、繁琐的装备拾取而感…...

3个核心优势:BG3 Mod Manager的模组管理创新特性

3个核心优势&#xff1a;BG3 Mod Manager的模组管理创新特性 【免费下载链接】BG3ModManager A mod manager for Baldurs Gate 3. This is the only official source! 项目地址: https://gitcode.com/gh_mirrors/bg/BG3ModManager 博德之门3&#xff08;Baldurs Gate 3&…...

嵌入式系统中的累加和校验算法原理与实现

1. 累加和校验算法概述在嵌入式系统开发中&#xff0c;数据通信的可靠性至关重要。想象一下&#xff0c;当你通过无线模块控制一台工业机器人时&#xff0c;如果传输的运动指令数据出现错误&#xff0c;可能导致机械臂做出完全不可预测的动作&#xff0c;轻则损坏产品&#xff…...

w3x2lni:魔兽地图跨版本兼容解决方案技术指南

w3x2lni&#xff1a;魔兽地图跨版本兼容解决方案技术指南 【免费下载链接】w3x2lni 魔兽地图格式转换工具 项目地址: https://gitcode.com/gh_mirrors/w3/w3x2lni 价值定位&#xff1a;破解魔兽地图版本壁垒 当你尝试在1.32.8版本魔兽争霸III中运行经典的1.24.4地图时&…...

Seelen-UI终极指南:5分钟打造你的专属Windows桌面环境

Seelen-UI终极指南&#xff1a;5分钟打造你的专属Windows桌面环境 【免费下载链接】Seelen-UI The Fully Customizable Desktop Environment for Windows 10/11. 项目地址: https://gitcode.com/GitHub_Trending/se/Seelen-UI 想要彻底改造Windows 10/11的桌面体验吗&am…...

Phi-4-mini-reasoning部署教程:多模型共存时GPU显存隔离配置技巧

Phi-4-mini-reasoning部署教程&#xff1a;多模型共存时GPU显存隔离配置技巧 1. 模型介绍 Phi-4-mini-reasoning是微软推出的3.8B参数轻量级开源模型&#xff0c;专为数学推理、逻辑推导和多步解题等强逻辑任务设计。这个模型主打"小参数、强推理、长上下文、低延迟&quo…...

天问Block环境下ASRPRO语音芯片实战:语音交互、GPIO控制与PWM调光开发指南

1. 天问Block与ASRPRO芯片开发入门 第一次接触天问Block和ASRPRO语音芯片时&#xff0c;我被它们的组合惊艳到了。这个开发环境就像乐高积木一样&#xff0c;通过拖拽代码块就能完成复杂的功能开发&#xff0c;特别适合像我这样的硬件爱好者。ASRPRO作为一款专为语音交互设计的…...

iOSDeviceSupport:解决设备调试兼容性问题的高效管理工具

iOSDeviceSupport&#xff1a;解决设备调试兼容性问题的高效管理工具 【免费下载链接】iOSDeviceSupport All versions of iOS Device Support 项目地址: https://gitcode.com/gh_mirrors/ios/iOSDeviceSupport 问题场景&#xff1a;当新系统遇见旧Xcode "连接失败…...