JS面试题:hash和history的区别

一、hash 模式和 history 模式的介绍

由于 Vue 项目为单页面应用,所以整个项目在开发和构建过程中,仅存在一个HTML物理文件。通过路由系统可以实现将项目的组件与可访问的URL路径进行绑定。由于Vue项目只有一个HTML物理文件,切换页面时既需要让访问的URL路径发生变化,又不能触发 HTML 物理文件的重新加载,这就使得 VueRouter 的跳页模式不能使用普通的超链接方式。
VueRouter 为了支持单页面应用的页面管理和页面跳转,提供了两种页面的跳转和加载模式:

二、hash 模式

hash 模式使用了锚点技术重写URL访问路径,会在原有的URL路径后拼接/#/xxx,这种方式可以在不重新加载原有HTML文件的基础上,实现切换URL,路径的目的。hash 模式的原理实现案例,代码如下:

重新加载的情况下切换 URL路径,配合 onhashchange()可以实现,一旦 URL 中的 hash 部分发生变化,就触发函数通知,通过 JavaScript编程便可以很快速的实现 DOM 对象的切换展示。hash 模式同时也存在不足之处,如在分布式微前端项目中,嵌套的子应用和主应用都使用用 hash 模式时,由于bash 模式的 URL路径只能存在一个#,会导致子应用和主应用在定义URL路径上存在困难。hash 模式的URL路径中包含#,也会在视觉上导致URL路径不美观。

三、history 模式


history 模式是 VueRouter 中常用的一种路由模式,它与 hash 模式不同,不需要借助锚点技术重写URL路径,所以history模式使用的URL路径中不存在#,在视觉上更加美观。history 模式采用 history 对象中的pushState()函数重写URL路径,可在触发重新加载的情况下变更 URL路径,history 模式的原理,代码如下:

history 模式重写 URL路径的解决方案与 hash 模式现象类似但本质不同,虽然 history模式可以重写URL路径,但是重写后的新路径中并不包含原有HTML物理文件的访问地址,所以 history 模式在重写 URL 路径后,一旦刷新网页会造成 404无法访问的效果。VueCL在开发环境中解决了 history 模式的刷新问题,不过项目发布到生产环境时,由于 history 模式的 URL路径问题,还需要配合生产服务器的转发规则重写,用以支持 history 模式的路由

四、区别

1. 是否带”#“号,hash 就是指 url 后面的 # 号以及后面的字符,history没有带#,外观上比hash 模式好看些
2. 原理的区别(看上面)
3. 兼容性:hash 能兼容到IE8, history 只能兼容到 IE10;
4. 请求:由于 hash 值变化不会导致浏览器向服务器发出请求,而且 hash 改变会触发 hashchange 事件(hashchange只能改变 # 后面的url片段);虽然hash路径出现在URL中,但是不会出现在HTTP请求中,对后端完全没有影响,因此改变hash值不会重新加载页面,基本都是使用 hash 来实现前端路由的。history前进后退不会导致浏览器向服务器发送请求,但是服务器没有配置,刷新会导致404

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

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

相关文章

Android中打印某应用的堆栈信息

先更具报名获取pid adb shell "ps|grep 包名" zygote的堆栈dump 实际上这个可以同时dump java线程及native线程的堆栈&#xff0c;对于java线程&#xff0c;java堆栈和native堆栈都可以得到。 kill -3 <pid> debuggerd的堆栈dump debuggerd是android的一个…

20240604将OK3588-C的核心板刷机Buildroot之后强制横屏

20240604将OK3588-C的核心板刷机Buildroot之后强制横屏 2024/6/4 17:13 viewproviewpro-ThinkBook-16-G5-IRH:~/repo_RK3588_Buildroot20240508/kernel/arch/arm64/boot/dts/rockchip$ grep dsi0 . -R ./Makefile:dtb-$(CONFIG_ARCH_ROCKCHIP) rk3568m-serdes-evb-display-dsi…

代码解读 | Hybrid Transformers for Music Source Separation[01]

一、背景 今天对Hybrid Transformer Demucs代码进行解读&#xff0c;目标&#xff1a;明确图c中各个模块对应的代码具体在工程的哪个地方。解读的代码是开源工程中的htdemucs.py。 具体的paper解读看这篇文章。 二、代码解读 算法整体流程&#xff1a;图c其实是从下往上看的&a…

快速入门C++正则表达式

正则表达式&#xff08;Regular Expression&#xff0c;简称 Regex&#xff09;是一种强大的文本处理工具&#xff0c;广泛用于字符串的搜索、替换、分析等操作。它基于一种表达式语言&#xff0c;使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。正则表达式不仅在…

堆盘子00

题目链接 堆盘子 题目描述 注意点 SetOfStacks应该由多个栈组成&#xff0c;并且在前一个栈填满时新建一个栈 解答思路 将多个栈存储到一个List中&#xff0c;当入栈时&#xff0c;如果List中最后一个栈容量已经达到cap&#xff0c;则需要新建一个栈&#xff0c;将元素推到…

springboot新生宿舍选取小程序-计算机毕业设计源码56499

摘 要 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;新生宿舍选取小程序管理系统被用户普遍使用&#xff0c;为…

QT 篇 五、手把手教学用QT编写TCP上位机并显示温湿度

QT应用篇 一、QT上位机串口编程 二、QML用Image组件实现Progress Bar 的效果 三、QML自定义显示SpinBox的加减按键图片及显示值效果 四、window编译LibModbus库并用QT编写一个Modbus主机 五、手把手教学用QT编写TCP上位机并显示温湿度 文章目录 QT应用篇软件篇1.新建QT工程2.U…

PW1558A规格探秘:为何它是电源系统不可或缺的6A双向保护芯片?

描述 PW1558A 是一款先进的 28V 6A 额定双向负载开关&#xff0c; 提供过载、 短路、 输入电压浪涌、 过大冲击电流和过热保护&#xff0c; 为系统供电。 内置的 24mΩ超低 RDS(ON)电源开关有助于减少正常操作期间的功率损耗。 该设备具有两个输入/输出端口 VBUS1 和 VBUS2&…

实验11 OSPF协议配置

实验11 OSPF协议配置 一、OSPF单区域配置&#xff08;一&#xff09;原理描述&#xff08;二&#xff09;实验目的&#xff08;三&#xff09;实验内容&#xff08;四&#xff09;实验配置&#xff08;五&#xff09;实验步骤 二、OSPF多区域配置&#xff08;一&#xff09;原理…

5252DE 5G 外场通信测试仪

5252DE 5G 外场通信测试仪 集先进算法和高性能硬件于一体的便携式测试仪表 产品综述 5252DE 5G 外场通信测试仪是集合高性能频谱处理模块、多制式解析算法软件于一体的手持式测试仪表&#xff0c;具有很好的便携性、兼容性与可拓展性。 5252DE 具有工作频段宽、性能指标高…

SOLIDWORKS修改零件时出现错误怎么办?

我们在使用SOLIDWOKRS进行零件建模过程中往往避免不了修改&#xff0c;但在修改后又常常会出现零件报错的情况&#xff0c;设计树中会出现一堆的错误和警告&#xff0c;我们如何快速处理这些问题呢&#xff1f; 我们都知道SOLIDWOKRS零件通常包含两大类的对象&#xff0c;分别…

骑行无界,勇者无限!2024COSP上海国际户外展带您畅享生活的速度与激情!

随着夏日来临&#xff0c;越来越多的人选择借由“绿色骑行”去触碰一座城市的脉搏&#xff0c;“城市骑行”正在成为时尚潮流活动和生活休闲方式。对于一部分城市打工人来说&#xff0c;自行车是一种通勤的工具&#xff0c;骑行成为健身的新选择。 在小红书里输入“骑行”&…

Python语言在地球科学交叉领域中的技术应用

Python是功能强大、免费、开源&#xff0c;实现面向对象的编程语言&#xff0c;Python能够运行在Linux、Windows、Macintosh、AIX操作系统上及不同平台&#xff08;x86和arm&#xff09;&#xff0c;Python简洁的语法和对动态输入的支持&#xff0c;再加上解释性语言的本质&…

以30大龄转行AI真的难吗?绝对不是的!

前言 在这个快速变化的时代&#xff0c;"30岁门槛"似乎成了许多人心中的一道坎&#xff0c;尤其是在考虑职业转型时。当提到转向人工智能&#xff08;AI&#xff09;这样技术驱动的领域&#xff0c;一些人可能会担忧年龄成为阻碍。然而&#xff0c;事实证明&#xf…

深度学习Week15——利用TensorFlow实现猫狗识别2

文章目录 深度学习Week15——利用TensorFlow实现猫狗识别2—数据增强 一、前言 二、我的环境 三、前期工作 1、配置环境 2、导入数据 四、数据预处理 1、加载数据 2、可视化数据 3、检查数据 4、配置数据集 五、构建VGG-16模型 1、设置动态学习率 2、早停与保存最佳模型参数 五…

华为OD机试 - 图像物体的边界 - 深度优先搜索(Java 2024 D卷 200分)

华为OD机试 2024C卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;D卷C卷A卷B卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测…

栈的最小值

题目链接 栈的最小值 题目描述 注意点 执行push、pop和min操作的时间复杂度必须为O(1) 解答思路 使用两个栈&#xff0c;一个栈deque存储栈中对应的元素值&#xff0c;另一个栈minDeque存储当前栈中所有元素的最小值&#xff0c;当执行push(int x)操作&#xff0c;deque直…

2041:【例5.9】新矩阵

#include <iostream> using namespace std; int main(){const int N 21;//几行几列 int g[N][N] {};int n 0;cin >> n;for (int i 1; i < n; i){for (int j 1; j < n; j){// 输入到几行几列 cin >> g[i][j];if (i j || i j n 1){//如果是这种…

【计算机毕设】基于SpringBoot的民宿在线预定平台设计与实现 - 源码免费(私信领取)

免费领取源码 &#xff5c; 项目完整可运行 &#xff5c; v&#xff1a;chengn7890 诚招源码校园代理&#xff01; 1. 研究目的 本研究旨在设计并实现一个基于SpringBoot的民宿在线预定平台。通过信息化手段提高民宿预定效率&#xff0c;方便用户查询房源、预定房间、在线支付和…