前端路由hash和history的六大区别

前端路由hash和history的区别

  • 前言
    • 谁的URL有#
    • 回车刷新时hash和history变化
  • 谁支持低版本浏览器
  • hash不会重新加载页面
  • 谁有历史记录
  • 谁需要后台配置
  • hash缺点

前言

本文主要讲解hash和history路由的区别,那么好本文正式开始。

谁的URL有#

路由Hash的地址上有#,而history路由没有#,这也是它俩最直观的区别。

回车刷新时hash和history变化

当我们在url中用回车键进行刷新时,hash会加载对应的页面,而history就会报404的错误。报错404的原因是在history模式中,地址并不是真实存在的,所以会报错404.

谁支持低版本浏览器

Hash路由是支持低版本浏览器的,而history不支持低版本的浏览器。具体点说就是hash能兼容到IE8,而history只能兼容到IE10版本。因为history是HTML5新增的。

hash不会重新加载页面

hash (url中#后面的部分)出现在url中,但不会被包含在http请求中,对后端完全没有影响,因此改变hash不会重新加载页面。而history当改变时候会重新加载页面。

谁有历史记录

history有历史记录,并且可以修改历史记录,因为它在H5中新增了pushstatereplacestate两个方法用于修改历史记录。

谁需要后台配置

history因为不会立刻请求http,所以说它其实是需要后台对它的刷新进行一个配置。而hash不需要。

注:而 Vue / React 应用的是hash的原理。通过不同的路由去调用不同的 函数 / js去生成不同的页面代码。

hash缺点

  1. 不利于SEO(搜索引擎优化)
  2. 由于浏览器需要先加载js再渲染页面,可能导致浏览器加载时间过慢导致白屏问题。

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

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

相关文章

阻塞队列

文章目录 阻塞队列BlockingQueue实现阻塞队列生产者消费者模型 阻塞队列 阻塞队列是什么呢? 阻塞队列是一种特殊的队列,满足队列的基本要求 - 先进先出。同时阻塞队列使一种线程安全的数据结构。不过阻塞队列相较于普通队列也有着它的特殊之处。 线程安…

HTML新手入门笔记整理:HTML常用标签总结表

HTML常用标签 标签 英文全称 语义 div division 区块(块元素) span span 区块(行内元素) p paragraph 段落 ol ordered list 有序列表 ul unordered list 无序列表 li list item 列表项 dl definition list 定义列表 dt definition term 定义术语 d…

思维模型 波纹效应

本系列文章 主要是 分享 思维模型,涉及各个领域,重在提升认知。小变化,大影响。 1 波纹效应的应用 1.1 波纹效应在市场中的应用 2008 年,美国金融危机爆发,导致全球经济陷入衰退。这场危机的起因是美国房地产市场的崩…

GIS入门,开源 JavaScript二维地图引擎OpenLayers介绍

VueOpenLayers中文教程推荐,不同于OpenLayers官方文档使用htmljs原生原生教程,博主专栏包含大量vue整合案例和实际开发案例,非常适合地图开发小白快速入门。 vue整合OpenLayers6入门教程: 《VueOpenLayers入门教程汇总目录》vue整…

Linux操作系统之apt常用命令记录

文章目录 apt 命令apt 语法apt 常用命令列出所有可更新的软件清单命令升级软件包列出可更新的软件包及版本信息升级软件包,升级前先删除需要更新软件包安装指定的软件命令:安装多个软件包:更新指定的软件命令显示软件包具体信息,例如&#xf…

Post请求数据格式

一、常用的数据编码格式 协议规定POST提交的数据必须放在请求体中,但是协议没有规定必须使用什么编码方式。而常用的数据编码方式有: Content - Type:application/x-www-form-urlencode:数据被编码为名称/值对,默认类…

基于阻塞队列的生产者消费者模型

目录 生产者消费者模型 生产者消费者模型是什么? 生产者消费者模型优点 基于阻塞队列的生产者消费者模型 生产者消费者模型 前面我们学习了生产者多线程,以及多线程的控制,下面我们看一下多线程中最常见的一个应用——生产者消费者模型。…

C语言进阶之路-运算符小怪篇

目录 一、学习目标 二、运算符详谈 算术运算符 关系运算符 逻辑运算符 位运算符 特殊运算符 条件运算符 sizeof 运算符 打怪实战 三、控制流 二路分支 多路分支 const while与 do…while循环 语法: for循环 break与continue goto语句&#xff08…

MySQL MHA高可用架构搭建

快捷查看指令 ctrlf 进行搜索会直接定位到需要的知识点和命令讲解(如有不正确的地方欢迎各位小伙伴在评论区提意见,博主会及时修改) MySQL MHA高可用架构搭建 MHA(Master HA)是一款开源的 MySQL 的高可用程序&#xf…

如何获得微软MVP徽章

要成为微软MVP,需要在特定领域成为专家,并积极参与社区,为其他人提供帮助和支持。以下是一些步骤可以帮助你成为MVP: 在特定领域成为专家:要成为MVP,需要在某个领域具有专业知识和经验。这可以通过阅读相关…

ffmpeg下载与配置环境变量

FFmpeg 是一个强大的多媒体框架,可以让用户处理和操纵音频和视频文件。具有易于使用的界面,用户可以在 Windows、Mac 或 Linux Ubuntu 系统上下载 FFmpeg 并将其提取到文件夹中。然后,该软件可以加入 PATH 环境变量中就可以快捷的使用软件了.…

pytorch矩阵乘法

torch.matmul torch.matmul是PyTorch中执行一般矩阵乘法的函数,它接受两个矩阵作为输入,并返回它们的乘积。它适用于任何两个矩阵,无论是密集矩阵还是稀疏矩阵。 import torch # 创建两个 2x2 矩阵 mat1 torch.tensor([[1, 2], [3, 4]]…

【LeeCode】27. 移除元素

给你一个数组 nums 和一个值 val,你需要 原地 移除所有数值等于 val 的元素,并返回移除后数组的新长度。 不要使用额外的数组空间,你必须仅使用 O(1) 额外空间并原地修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出新长度后面的…

MYSQL基础知识之【修改数据,删除数据】

文章目录 前言MySQL UPDATE 查询使用PHP脚本更新数据 MySQL DELETE 语句从命令行中删除数据使用 PHP 脚本删除数据 后言 前言 hello world欢迎来到前端的新世界 😜当前文章系列专栏:Mysql 🐱‍👓博主在前端领域还有很多知识和技术…

使用 STM32 读取和解析 NTC 热敏电阻的数值

本文介绍了如何利用 STM32 微控制器读取和解析 NTC(Negative Temperature Coefficient)热敏电阻的数值。首先,我们将简要介绍 NTC 热敏电阻的原理和特性。接下来,我们将详细讨论如何设计电路连接和采用合适的 STM32 外设进行数值读…

Java——包机制(package、import)

包机制是Java中管理类的重要手段。开发中我们会遇到大量同名的类,通过包我们很容易对解决类重名的问题,也可以实现对类的有效管理。包对于类,相当于文件夹对于文件的作用。 package 我们通过package实现对类的管理,package的使用…

Element-Plus 图标自动导入

🚀 作者主页: 有来技术 🔥 开源项目: youlai-mall 🍃 vue3-element-admin 🍃 youlai-boot 🌺 仓库主页: Gitee 💫 Github 💫 GitCode 💖 欢迎点赞…

迎接“全全闪”时代 XSKY星辰天合发布星海架构和星飞产品

11 月 17 日消息,北京市星辰天合科技股份有限公司(简称:XSKY星辰天合)在北京首钢园举办了主题为“星星之火”的 XSKY 星海全闪架构暨星飞存储发布会。 (图注:XSKY星辰天合 CEO 胥昕) XSKY星辰天…

SQL sever2008中的游标

目录 一、游标概述 二、游标的实现 三、优缺点 3.1优点: 3.2缺点: 四、游标类型 4.1静态游标 4.2动态游标 4.3只进游标 4.4键集驱动游标 4.5显示游标: 4.6隐式游标 五、游标基本操作 5.1声明游标 5.1.1.IS0标准语法 5.1.1.1语…

【经典小练习】输出文件路径名

文章目录 🌹问题✨思路🍔代码🛸读取文件,并把文件名保存到文件中 对指定目录下的所有 Java 文件进行编译、打包等处理; 查找指定目录下所有包含特定字符串的 Java 文件; 统计指定目录下所有 Java 文件的行数…