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

保姆级教程:用LongCat动物百变秀,快速给猫狗加帽子、换造型

保姆级教程&#xff1a;用LongCat动物百变秀&#xff0c;快速给猫狗加帽子、换造型 1. 为什么选择动物百变秀&#xff1f; 给宠物照片添加创意元素一直是许多人的需求&#xff0c;但传统方法要么需要专业PS技能&#xff0c;要么效果生硬不自然。LongCat动物百变秀解决了这个痛…...

APDS9960手势传感器驱动开发与嵌入式实战

1. APDS9960手势传感器库技术解析与嵌入式工程实践APDS9960是一款由Broadcom&#xff08;原Avago&#xff09;推出的集成环境光、颜色、接近度及手势识别功能的多模态光学传感器芯片。其核心价值在于将传统分立式光感方案&#xff08;如独立ALSProximityGesture模块&#xff09…...

2GB内存Linux系统运行Django或Flask项目会不会内存不足?

在 2GB 内存的 Linux 系统上运行 Django 或 Flask 项目&#xff0c;完全可行&#xff0c;但需要谨慎配置和监控。能否稳定运行取决于你的应用复杂度、并发量以及部署架构。 原文地址&#xff1a;https://blog.zestb.com/article/129805.html 以下是具体的分析和优化建议&…...

投资分析太复杂?用TradingAgents-CN实现零代码智能分析的3个方案

投资分析太复杂&#xff1f;用TradingAgents-CN实现零代码智能分析的3个方案 【免费下载链接】TradingAgents-CN 基于多智能体LLM的中文金融交易框架 - TradingAgents中文增强版 项目地址: https://gitcode.com/GitHub_Trending/tr/TradingAgents-CN TradingAgents-CN作…...

SMAPI模组加载器全方位指南:从安装到高效管理星露谷物语模组

SMAPI模组加载器全方位指南&#xff1a;从安装到高效管理星露谷物语模组 【免费下载链接】SMAPI The modding API for Stardew Valley. 项目地址: https://gitcode.com/gh_mirrors/smap/SMAPI 作为开源工具的SMAPI模组加载器&#xff0c;是星露谷物语玩家扩展游戏体验的…...

STM32F4读写SD卡:填一填ST官方HAL库的坑

使用STM32读写SD卡在低功耗存储中的应用是比较常见的&#xff0c;但是网上大多数资料都是基于标准库或者基于寄存器的开发。随着嵌入式设备越来越复杂&#xff0c;使用HAL库能够大大降低开发者的学习成本&#xff0c;从而提高开发效率。近年来&#xff0c;ST官方主推以STM32Cub…...

小红书自动评论的‘伪需求’与真风险:聊聊RPA工具养号背后的封号逻辑与合规玩法

小红书自动化评论的合规边界&#xff1a;效率与账号安全的博弈术 凌晨三点&#xff0c;某MCN机构运营负责人李然被连续不断的手机提示音惊醒——团队管理的12个小红书达人账号同时收到平台封禁通知&#xff0c;而这一切都源于他们三天前部署的那套"高效互动系统"。这…...

07-打造个性化 AI 助手

OpenClaw 第七篇:记忆系统进阶——打造个性化 AI 助手 “Memory is the treasury and guardian of all things.” — Cicero 在人工智能领域,有一个永恒的挑战:如何让 AI 记住「我是谁」、「你是谁」,以及「我们之前聊过什么」。OpenClaw 作为新一代 AI 自动化平台,构建了…...

HunyuanVideo-Foley 企业级架构设计:基于Agent的分布式音效生成调度系统

HunyuanVideo-Foley 企业级架构设计&#xff1a;基于Agent的分布式音效生成调度系统 1. 引言&#xff1a;音效生成的企业级挑战 想象一下这样的场景&#xff1a;一家大型视频平台每天需要为上万条视频自动生成匹配的音效。传统单机方案面临三大难题&#xff1a;生成速度跟不上…...

Hunyuan模型如何降本增效?1.8B边缘部署实战案例分享

Hunyuan模型如何降本增效&#xff1f;1.8B边缘部署实战案例分享 1. 模型介绍与核心优势 混元翻译模型1.5版本带来了两个重要更新&#xff1a;18亿参数的HY-MT1.5-1.8B和70亿参数的HY-MT1.5-7B。这两个模型都专注于支持33种语言之间的互译&#xff0c;特别包含了5种民族语言及…...