hash路由和history路由的区别

当我们构建前端应用时,路由是一个重要的概念。它允许我们在不刷新整个页面的情况下,根据URL的变化来加载不同的内容。在前端开发中,有两种常见的路由实现方式:哈希路由(Hash Routing)和历史路由(History Routing)。本文将介绍这两种路由方式的区别。

 hash路由

  1. 哈希路由: 哈希路由是通过URL中的哈希符号(#)来表示路由路径的一种方式。例如,一个哈希路由的URL可能是这样的:http://example.com/#/home。在这个URL中,哈希符号后面的部分(/home)表示路由路径。

哈希路由的特点是:

  • URL格式:使用哈希符号来表示路由路径。
  • 页面变化:当哈希值发生变化时,浏览器不会向服务器发送请求,页面也不会重新加载。
  • 事件监听:通过JavaScript监听hashchange事件,可以在哈希值变化时更新页面内容。

由于哈希路由不会引起页面的重新加载,它在单页应用(SPA)中被广泛使用。通过监听hashchange事件,我们可以根据哈希值的变化,动态地加载不同的组件或页面内容,从而实现页面的切换和更新。

history路由

  1. 历史路由: 历史路由是通过改变URL的路径来表示路由的一种方式。例如,一个历史路由的URL可能是这样的:http://example.com/home。在这个URL中,路径部分(/home)表示路由路径。

历史路由的特点是:

  • URL格式:使用真实的URL路径来表示路由路径。
  • 页面变化:当URL发生变化时,浏览器会向服务器发送请求,服务器返回对应的页面内容,然后浏览器重新加载页面并显示新内容。

历史路由需要服务器的支持,以确保在刷新页面或直接访问特定URL时能够正确加载对应的内容。它更适用于传统的多页应用,其中每个路由对应着一个独立的页面。

 实现原理不同

hash: 当页面中的 hash 发生变化时,会触发hashChange事件,通过监听hashChange事件进行页面定位,渲染不同的内容;

history: 利用HTML5 History API 提供的 history.pushState方法或者 history.replaceState 方法,监听popstate事件,需要客户端和服务端共同的支持。

为什么history需要客户端和服务端共同支持?

历史路由(History Routing)是通过改变URL的路径来表示路由的一种方式。它需要客户端和服务端共同支持,以确保在刷新页面或直接访问特定URL时能够正确加载对应的内容。

具体来说,当我们使用历史路由时,客户端(浏览器)会向服务器发送请求,请求对应的页面内容。服务器需要根据请求的URL路径,返回对应的HTML页面。如果服务器没有正确配置,或者没有相应的路由规则,就会导致页面无法正确加载。

另外,由于历史路由使用真实的URL路径来表示路由,因此在使用浏览器的前进和后退按钮时,浏览器会向服务器发送请求,请求对应的页面内容。如果服务器没有正确配置,或者没有相应的路由规则,就会导致页面无法正确加载。

因此,为了确保历史路由的正常运行,需要客户端和服务端共同支持。客户端需要正确处理URL的变化,并向服务器发送请求获取对应的页面内容。服务端需要根据请求的URL路径,返回对应的HTML页面。

需要注意的是,如果使用哈希路由(Hash Routing),则不需要服务端的支持。因为哈希路由是通过URL中的哈希符号来表示路由路径的,不会触发浏览器向服务器发送请求。因此,哈希路由更适用于单页应用(SPA)等不需要服务器端渲染的场景。

总之,历史路由需要客户端和服务端共同支持,以确保在刷新页面或直接访问特定URL时能够正确加载对应的内容。

总结:

 哈希路由和历史路由是两种常见的前端路由实现方式。哈希路由使用URL中的哈希符号来表示路由路径,不会引起页面的重新加载,而历史路由通过改变URL的路径来表示路由,会触发页面的重新加载。哈希路由适用于单页应用,而历史路由适用于传统的多页应用。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

技术合集|企业AI应用落地的关键问题和应对方法

目录 一、生成式AI助力数字化转型的关键 二、用大模型来做什么 三、AI应用如何落地 四、写在最后 2022年11月,OpenAI正式推出ChatGPT,短短一年的时间里,人类被迫重温了文字语言在人类文明中的重要作用——承载着一切的思维表达与沟通实现…

java毕业设计—vue+springboot影院售票及电影管理系统

1,项目背景 目的:本课题主要目标是设计并能够实现一个基于web网页的电影院购票选座系统,整个网站项目使用了B/S架构,基于vue和SpringBoot框架下开发;管理员通过后台管理系统实现管理影院信息,电影信息&…

Node.js-模块与包

1. 模块 1.1 模块化的基本概念 1.2 模块化规范 2.Node.js中的模块化 2.1 Node.js中的模块化分类 2.2 加载模块 2.3 Node.js中的模块作用域 2.4 向外共享模块作用域的成员 2.4.1 module对象 2.4.2 module.exports对象 2.4.3 共享成员的注意点 2.4.4 exports对象 2.5 Node.js中…

介绍一下我本地使用的截图工具 PixPin

介绍一下我本地使用的截图工具 PixPin 0. 背景1. PixPin 安装文件下载2. PixPin 安装3. PixPin 简单配置4. PixPin 使用 0. 背景 截图是工作上的经常性需求,一个好的截图工具会大大提高我们的工作效率。 一直以来,非常喜欢微信自带的截图功能&#xff…

抖店新手应该怎么玩?如何运营?

我是电商珠珠 抖店作为一个短视频电商平台,其兴趣电商发展模式深受大众的喜爱,虽然和拼多多一样,都是走的低价平台,但是在规则和玩法上,略胜一筹。 所以,很多想要做店的人都想要去入驻这个平台&#xff0…

【网络奇缘】——奈氏准则和香农定理从理论到实践一站式服务|计算机网络

🌈个人主页: Aileen_0v0 🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 💫个人格言:"没有罗马,那就自己创造罗马~" 目录 失真 - 信号的变化 影响信号失真的因素: ​编辑 失真的一种现象:码间…

TPU-MLIR

1、AI 编译器 TPU,张量处理器 AI编译器,把不同框架下的搭建起来的模型,转换为统一形式的中间表达 IR,然后通过 IR 转换成可以在特定芯片平台上运行的二进制模型 Top,芯片无关层:图优化、量化、推理 Tpu…

Java 将PDF 转为图片 工具 【Free Spire.PDF for Java】(免费版)

Java 将PDF 转为图片 使用工具:Free Spire.PDF for Java(免费版) Jar文件获取及导入: 方法1:通过官网下载jar文件包。下载后,解压文件,并将lib文件夹下的Spire.Pdf.jar文件导入Java程序。 方…

如何进行安全管理

目录 安全管理 修改ECS实例登录密码 方式一:重置ECS实例密码 方式二:在实例内部修改登录密码 安全组 ECS实例加入安全组的规则 使用安全组 补丁管理 安全管理 如果希望保护网站安全,首先就要保护ECS实例安全,这需要对ECS实…

AG16KDDF256 User Manual

AGM AG16KDDF256 是由 AGM FPGA AG16K 与 DDR-SDRAM 叠封集成的芯片,具有 AG16K FPGA的可编程功能,提供更多可编程 IO,同时内部连接大容量 DDR-SDRAM。  FPGA 外部管脚 FBGA256 封装,管脚说明请见下表 Table-1: Tab…

vr虚拟高压电器三维仿真展示更立体全面

VR工业虚拟仿真软件的应用价值主要体现在以下几个方面: 降低成本:通过VR技术进行产品设计和开发,可以在虚拟环境中进行,从而减少对物理样机的依赖,降低试错成本和时间。此外,利用VR技术构建的模拟场景使用方…

Azure Machine Learning - Azure OpenAI GPT 3.5 Turbo 微调教程

本教程将引导你在Azure平台完成对 gpt-35-turbo-0613 模型的微调。 关注TechLead,分享AI全维度知识。作者拥有10年互联网服务架构、AI产品研发经验、团队管理经验,同济本复旦硕,复旦机器人智能实验室成员,阿里云认证的资深架构师&…

Java基于TCP网络编程的群聊功能

服务端 import java.net.ServerSocket; import java.net.Socket; import java.util.ArrayList; import java.util.List;public class Server2 {public static List<Socket> onlineList new ArrayList<>();public static void main(String[] args) throws Except…

Uncaught ReferenceError: VueRouter is not defined

没有引入完全&#xff0c;报缺什么就引入什么 import * as VueRouter from vue-router;

STM32CubeIDE在使用freertos的情况下空间占用情况

因为STM32F103C8T6芯片的存储空间太小了&#xff0c;只有64K&#xff0c;在使用STM32CubeIDE的freertos情况下空间占用情况做个简单的测试&#xff1a; 不使用程序优化&#xff1a; 空间占用情况&#xff1a; 如果使用浮点运算功能的printf&#xff1a; 这个使用空间占用更大…

网络编程套接字socket

哈哈哈&#xff0c;之前的保存成草稿忘了发 目录 一 . 先回顾一下网络初始中的相关概念&#xff1a; 1.网络通信&#xff1a; 2.局域网&#xff1a; 3.广域网&#xff1a; 4.IP地址&#xff1a; 5.端口&#xff1a; 概念 格式 6.协议&#xff1a; 7.五元组&#xff1a; 8.分层…

恶意软件分析沙箱在网络安全策略中处于什么位置?

恶意软件分析沙箱提供了一种全面的恶意软件分析方法&#xff0c;包括静态和动态技术。这种全面的评估可以更全面地了解恶意软件的功能和潜在影响。然而&#xff0c;许多组织在确定在其安全基础设施中实施沙箱的最有效方法方面面临挑战。让我们看一下可以有效利用沙盒解决方案的…

[足式机器人]Part4 南科大高等机器人控制课 CH10 Bascis of Stability Analysis

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;CLEAR_LAB 笔者带更新-运动学 课程主讲教师&#xff1a; Prof. Wei Zhang 南科大高等机器人控制课 Ch10 Bascis of Stability Analysis 1. Background1.1 What is Stability Analysis1.2 General ODE Models for Dynamic…

162TB全球卫星地图瓦片服务

这里再为你分享长光的另一款重量级产品&#xff0c;即《吉林一号国产化全球遥感底图瓦片服务》&#xff0c;你可以把它简单地理解为是一套全球离线地图服务系统。 为了行文方便&#xff0c;我们在本文暂且称之为“长光全球瓦片系统”。 《长光全球瓦片系统》参数 《长光全球…

电脑屏幕保护时间怎么设置?这4个方法很管用!

“我的工作经常都需要使用电脑&#xff0c;有时候使用时间比较长&#xff0c;会有眼睛疲惫的感觉。想问问电脑屏幕保护时间应该怎么设置呢&#xff1f;有什么可以快速对电脑屏幕保护时间进行设置的方法吗&#xff1f;” 在现代生活中&#xff0c;电脑已经成为我们不可或缺的工具…