前端路由history路由和hash路由的区别?原理?
前端路由是指在单页应用程序(SPA)中通过改变 URL 路径来实现页面切换和导航的机制。在前端开发中,有两种主要的前端路由实现方式:基于 History API 的路由(history-based routing)和基于哈希(Hash)的路由(hash-based routing)。
-
基于 History API 的路由(history-based routing):
- History API 是 HTML5 提供的一组用于操作浏览器历史记录的接口。它允许 JavaScript 动态地改变 URL,并添加、修改或删除历史记录条目,而无需刷新整个页面。
- 实现原理:当使用基于 History API 的路由时,URL 的路径部分会随着用户的操作而动态改变。通过 History API 提供的方法(如
pushState、replaceState)可以添加或修改历史记录条目,并触发相应的页面跳转。浏览器会根据这些历史记录条目,加载相应的页面内容,并保持页面状态的一致性。 - 示例:假设使用基于 History API 的路由,当用户点击导航链接时,JavaScript 可以使用
pushState方法将新的路径添加到浏览器的历史记录中。然后,浏览器会加载对应的页面内容,而不会刷新整个页面。这样用户就可以通过浏览器的前进和后退按钮来导航页面,同时 URL 也会相应地改变。
-
基于哈希的路由(hash-based routing):
- 哈希路由是在 URL 中使用哈希符号(#)来模拟路由的一种方式。在哈希路由中,URL 的路径部分位于 # 符号之前,而 # 符号后面的部分被称为哈希片段(hash fragment)。
- 实现原理:当使用基于哈希的路由时,URL 中的哈希片段会随着用户的操作而改变,但不会触发整个页面的刷新。JavaScript 可以通过监听浏览器的 hashchange 事件来检测 URL 的变化,并根据哈希片段的不同值加载相应的页面内容。
- 示例:假设使用基于哈希的路由,当用户点击导航链接时,JavaScript 可以通过修改
window.location.hash属性来改变 URL 的哈希片段。然后,JavaScript 监听 hashchange 事件,根据新的哈希片段值加载相应的页面内容。
需要注意的是,基于 History API 的路由在现代浏览器中更为常见和推荐,因为它提供了更加优雅和语义化的 URL 结构,而且不会造成页面跳转时出现闪烁的问题。而基于哈希的路由主要用于兼容老版本浏览器或在一些特殊场景下使用。
相关文章:
前端路由history路由和hash路由的区别?原理?
前端路由是指在单页应用程序(SPA)中通过改变 URL 路径来实现页面切换和导航的机制。在前端开发中,有两种主要的前端路由实现方式:基于 History API 的路由(history-based routing)和基于哈希(Ha…...
AcWing 727. 菱形——像拼图一样做题
题目描述] 分析: 利用程序根据输入的整数,画出由字符*构成的该整数阶的实心菱形。给出一个示例: n 7 n7 n7。 * * * * * * * * * * * * * * * * * * * * * * * * * 我们将采取拆解问题,通过四个部分的…...
深入理解生成型大型语言模型:自监督预训练、细调与对齐过程及其应用
分析概述 本文主要介绍了生成型大型语言模型(LLM)的预训练过程,特别是通过下一个令牌(token)预测的自监督学习方法,以及后续的细调(finetuning)和对齐(alignment&#x…...
个人简历主页搭建系列-03:Hexo+Github Pages 介绍,框架配置
今天的更新内容主要是了解为什么选择这个网站搭建方案,以及一些前置软件的安装。 Why Hexo? 首先我们了解一下几种简单的网站框架搭建方案,看看对于搭建简历网站的需求哪个更合适。 在 BuiltWith(网站技术分析工具)上我们可以…...
【堆、位运算、数学】算法例题
目录 十九、堆 121. 数组中的第K个最大元素 ② 122. IPO ③ 123. 查找和最小的K对数字 ② 124. 数据流的中位数 ③ 二十、位运算 125. 二进制求和 ① 126. 颠倒二进制位 ① 127. 位1的个数 ① 128. 只出现一次的数字 ① 129. 只出现一次的数字 II ② 130. 数字范围…...
IDEA 多个git仓库项目放一个窗口
1、多个项目先通过新建module或者CtrlAltShiftS 添加module引入 2、重点是右下角有时候git 分支视图只有一个module的Repositories。这时候需要去设置把多个git仓库添加到同一个窗口才能方便提交代码。 3、如果Directory Mappings已经有相关项目配置,但是灰色的&…...
全球变暖(蓝桥杯,acwing每日一题)
题目描述: 你有一张某海域 NN 像素的照片,”.”表示海洋、”#”表示陆地,如下所示: ....... .##.... .##.... ....##. ..####. ...###. .......其中”上下左右”四个方向上连在一起的一片陆地组成一座岛屿,例如上图就…...
多数据源 - dynamic-datasource | 集成 Quartz 及 ShardingJDBC
文章目录 集成 Quartz引入 quartz-starter配置数据源参数创建任务配置 Quartz 实际使用的数据源方式一: 自定义 SchedulerFactoryBeanCustomizer方式二: 使用@QuartzDataSource来指明quartz数据源集成 ShardingJDBC项目引入 shardingsphere 依赖分别配置shardingjdbc和多数据…...
四连杆机构运动学仿真 | 【Matlab源码+理论公式文本】| 曲柄滑块 | 曲柄摇杆 | 机械连杆
【程序简介】💻🔍 本程序通过matlab实现了四连杆机构的运动学仿真编程,动态展现了四连杆机构的运动动画,同时给出了角位移、角速度和角加速度的时程曲线,除了程序本身,还提供了机构运动学公式推导文档&…...
Lightroom Classic 2024 for mac 中文激活:强大的图像后期处理软件
对于追求极致画面效果的摄影师来说,Lightroom Classic 2024无疑是Mac平台上的一款必备软件。它凭借其强大的功能和出色的性能,赢得了众多摄影师的青睐。 软件下载:Lightroom Classic 2024 for mac 中文激活版下载 在Lightroom Classic 2024中…...
程序员下班以后做什么副业合适?
我就是一个最普通的网络安全工程师,出道快10年了,不出意外地遭遇到瓶颈期,但是凭技术在各大平台挖漏洞副业,硬是妥妥扛过来了。 因为对于程序员来讲,这是个试错成本很低、事半功倍的选择。编程技能是一种强大生产力&a…...
HSE化工应急安全生产管理平台:衢州某巨大型化工企业的成功应用
在化工行业中,安全生产一直是至关重要的议题。为了提高生产安全性、降低成本并提升企业形象,衢州某巨大型化工企业引入了HSE化工应急安全生产管理平台,取得了显著的改善和获益。 该平台的核心功能包括风险管理和应急预案制定。通过对化工生产…...
塑料工厂5G智能制造数字孪生可视化平台,推进塑料行业数字化转型
塑料工厂5G智能制造数字孪生可视化平台,推进塑料行业数字化转型。塑料制造行业作为重要的工业领域,亟需借助这一平台实现产业升级与转型,以适应市场的变化和提高生产效率。传统的塑料制造过程往往存在生产效率低下、资源浪费、环境污染等问题…...
HTML万字学习总结
html文本标签特殊符号图片音频与视频超链接表单列表表格语义标签(布局) html文本标签 标签简介<html></html>根目录<head></head>规定文档相关的配置信息(元数据<body></body>元素表示文档的内容<meta></meta>表示…...
Linux网络编程: 以太网帧Frame/ARP/RARP详解
一、TCP/IP五层模型 物理层(Physical Layer):物理层是最底层,负责传输比特流(bitstream)以及物理介质的传输方式。它定义了如何在物理媒介上传输原始的比特流,例如通过电缆、光纤或无线传输等。…...
【SpringCloud微服务实战09】Elasticsearch 搜索引擎
一、Elasticsearch 安装 1、Docker安装ES #创建一个网络 docker network create es-net#拉取ES镜像(这里使用7.17.18版本) docker pull elasticsearch:7.17.18#新建一个目录存放es数据 mkdir es cd es#docker运行 单机启动es docker run -d \--name es \-e "ES_JAVA_O…...
Leetcode 31. 删除无效的括号
心路历程: 一开始看到有点懵,后来发现有点像按照一定规则穷举所有可能情况,想到了排列组合问题,再结合问题长度不固定,无法用已知个for循环表示,从而想到了回溯。这个题相当于需要在一定规则下枚举。 按照…...
首页效果炫酷的wordpress免费主题模板
视频背景免费WP主题 简洁大气的视频背景wordpress主题,找大视频背景的主题可以看看这个。 https://www.wpniu.com/themes/193.html 红色全屏大图WP主题 非常经典的一款免费wordpress主题,红色全屏大图满足多行业使用。 https://www.wpniu.com/themes…...
网络安全的几个关键领域
网络安全是一个复杂且多维度的领域,涵盖了多个关键领域,涉及到信息保护、网络防护、应用安全、用户教育以及物理安全等多个方面。这些关键领域相互交织,共同构成了网络安全这一宏大且细致入微的领域。 今天德迅云安全就分享下网络安全的几个…...
Vue 计算属性和监视属性
Vue 计算属性和监视属性 computed computed 计算属性 规则: 用已有的属性计算不存在的属性默认调用一次get()只有值不发生改变的时候才可以使用简写(函数);值发生改变 使用对象式写法,才可以配置set()方法底层原理使…...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...
Appium+python自动化(十六)- ADB命令
简介 Android 调试桥(adb)是多种用途的工具,该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具,其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利,如安装和调试…...
大语言模型如何处理长文本?常用文本分割技术详解
为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上,所以报错,到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本,cu、torch、cp 的版本一定要对…...
unix/linux,sudo,其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一,概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本:2014.07; Kernel版本:Linux-3.10; 二,Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01),并让boo…...
代理篇12|深入理解 Vite中的Proxy接口代理配置
在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...
佰力博科技与您探讨热释电测量的几种方法
热释电的测量主要涉及热释电系数的测定,这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中,积分电荷法最为常用,其原理是通过测量在电容器上积累的热释电电荷,从而确定热释电系数…...
安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖
在Vuzix M400 AR智能眼镜的助力下,卢森堡罗伯特舒曼医院(the Robert Schuman Hospitals, HRS)凭借在无菌制剂生产流程中引入增强现实技术(AR)创新项目,荣获了2024年6月7日由卢森堡医院药剂师协会࿰…...
