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

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

相关文章:

JS面试题:hash和history的区别

一、hash 模式和 history 模式的介绍 由于 Vue 项目为单页面应用,所以整个项目在开发和构建过程中,仅存在一个HTML物理文件。通过路由系统可以实现将项目的组件与可访问的URL路径进行绑定。由于Vue项目只有一个HTML物理文件,切换页面时既需要…...

GEE案例——归一化差异水体指数丰水期、枯水期的水域面积和水深分析(青海湖为例)

简介 水深反演是指利用遥感技术从航空或卫星平台上获取的数据来推断水体的深度信息。这种技术在海洋学、湖泊和河流的科学研究与管理中非常重要。以下是几种常用的水深反演方法: 1. **光学遥感反演**: - 基于水体颜色和透明度的变化与水深的关系,使用光学遥感影像(如L…...

机器视觉检测--相机

一,相机就是CCD么? 通常,我们把相机都叫作CCD,CCD已经成了相机的代名词。其实很可能正在使用的是CMOS。CCD以及CMOS都称为感光元件,都是将光学图像转换为电子信号的半导体元件。他们在检测光时都采用光电二极管&#…...

【人工智能】第四部分:ChatGPT的技术实现

人不走空 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌赋:斯是陋室,惟吾德馨 目录 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌…...

小程序配置自定义tabBar及异形tabBar配置操作

什么是tabBar? 小程序的tabbar是指小程序底部的一组固定导航按钮,通常包含2-5个按钮,用于快速切换小程序的不同页面。每个按钮都有一个图标和文本标签,点击按钮可以切换到对应的页面。tabbar通常放置在小程序的底部,以…...

解析《动物园规则怪谈》【逻辑】

鉴赏《动物园规则怪谈》【逻辑】 前言版权推荐鉴赏《动物园规则怪谈》推理游客正方“它”方其他物品 不同规则或纸条的对比联系出现的地方及联系游客入园历程:被“它”污染的过程鉴赏升华 最后 前言 2024-5-31 13:05:38 以下内容源自《【逻辑】》 仅供学习交流使用…...

上传RKP 证书签名请求息上传到 Google 的后端服务器

上传证书签名请求 1.准备环境:OK pip3 install google-auth2.13.0 requests2.28下载 device_info_uploader.py 。 没找到先跳过 选项 1:通过 GCP 帐户使用 device_info_uploader.py 运行脚本。 ./device_info_uploader.py --credentials /secure/s…...

Debian和ubuntu 嵌入式的系统的 区别

随着开源操作系统的日益流行,Debian和Ubuntu这两个基于Linux的发行版本成为了众多开发者和系统管理员的首选。它们各自拥有独特的优势和特点,那么,在选择时,哪一个更适合你呢?接下来,我们将深入探讨两者的关…...

HTML旋转照片盒子

效果图 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compatible" content…...

【UE5 刺客信条动态地面复刻】实现无界地面01:动态生成

2024.6.4更新 昨天半夜意识到生成Cube的方案不合适&#xff0c;又开始到处找动态地面的方法&#xff0c;发现了我想要的效果直接可以用nigara实现&#xff01;&#xff01;&#xff01;&#xff01; 于是这个部分就暂时告一段落&#xff0c;今季开始新的方向的学习。 为了快速…...

AI产品经理系列-如何使用kimi快速撰写用户故事(含提示词)

在AI时代&#xff0c;可能人人都可成为产品经理。 之前我们聊过如何使用kimi协助完成产品需求文档&#xff0c;如何写竞品分析报告&#xff0c;这一篇我们聊聊用户故事&#xff0c;如何使用kimi协助撰写产品需求文档中的用户故事。 在此之前我们先了解下什么是用户故事&#…...

MySQL索引与事务

前言&#x1f440;~ 紧接着数据库的相关知识&#xff0c;今天讲解MySQL面试中频繁被问到的知识点&#xff0c;索引与事务!!! 如果各位对文章的内容感兴趣的话&#xff0c;请点点小赞&#xff0c;关注一手不迷路&#xff0c;如果内容有什么问题的话&#xff0c;欢迎各位评论纠正…...

『大模型笔记』从基础原理出发提升深度学习性能

从基础原理出发提升深度学习性能 文章目录 一. 从基础原理出发提升深度学习性能1.1. 计算(compute)1.2. 带宽(Bandwidth)1.2.1 关于内存带宽成本的推理(Reasoning about Memory-Bandwidth Costs)1.3. 开销(Overhead)二. 总结三. 参考文献Making Deep Learning Go Brrrr F…...

【二叉树】Leetcode 222. 完全二叉树的节点个数【简单】

完全二叉树的节点个数 你一棵 完全二叉树 的根节点 root &#xff0c;求出该树的节点个数。 完全二叉树 的定义如下&#xff1a;在完全二叉树中&#xff0c;除了最底层节点可能没填满外&#xff0c;其余每层节点数都达到最大值&#xff0c;并且最下面一层的节点都集中在该层最…...

golang界面设计器,全网少见

今天登录govcl的网站&#xff0c;无意中看到有个简易UI设计器。 对于golang的UI专用设计器&#xff0c;还没在网上真正见过。 之前也用govcl来做过两三个桌面应用&#xff0c;好用是好用&#xff0c;不过要安装Lazarus的IDE来拖动设计UI&#xff0c;还要配置很多东西&#xff0…...

如何在GlobalMapper中加载高清卫星影像?

GlobalMapper在GIS行业几乎无人不知&#xff0c;无人不晓&#xff0c;但它可以直接加载卫星影像也许就不是每个人都知道的了。 这里就来分享一下如何在GlobalMapper中加载高清卫星影像&#xff0c;并可以在文末查看领取软件安装包和图源的方法。 如何加载高清图源 首先&…...

【机器学习】解锁AI密码:神经网络算法详解与前沿探索

&#x1f440;传送门&#x1f440; &#x1f50d;引言&#x1f340;神经网络的基本原理&#x1f680;神经网络的结构&#x1f4d5;神经网络的训练过程&#x1f686;神经网络的应用实例&#x1f496;未来发展趋势&#x1f496;结语 &#x1f50d;引言 随着人工智能技术的飞速发…...

Java如何实现pdf转base64以及怎么反转?

问题需求 今天在做发送邮件功能的时候&#xff0c;发现邮件的附件部分&#xff0c;比如pdf文档&#xff0c;要求先把pdf转为base64&#xff0c;邮件才会发送。那接下来就先看看Java 如何把 pdf文档转为base64。 两种方式&#xff0c;一种是通过插件 jar 包的方式引入&#xf…...

动态规划5:62. 不同路径

动态规划解题步骤&#xff1a; 1.确定状态表示&#xff1a;dp[i]是什么 2.确定状态转移方程&#xff1a;dp[i]等于什么 3.初始化&#xff1a;确保状态转移方程不越界 4.确定填表顺序&#xff1a;根据状态转移方程即可确定填表顺序 5.确定返回值 题目链接&#xff1a;62. …...

Python编程学习第一篇——Python零基础快速入门(五)-列表(List)

今天我们来一起学习Python的列表&#xff08;list&#xff09;&#xff0c;Python中的列表&#xff08;List&#xff09;是一种有序、可变的数据结构&#xff0c;可以用来存储多个值。列表可以包含不同类型的数据&#xff0c;例如整数、浮点数、字符串等。以下是关于Python列表…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...