history和hash两种路由模式原理,和优缺点

Hash

Hash 模式是在 URL 中使用井号(#)来作为路由的模式。在 Hash 模式下,即使页面刷新,浏览器仍然只会请求页面的初始 HTML 文件,所有的路由变化都会在 URL 前面添加 “#/” 符号。

原理
在 Hash 模式下,路由的机制是使用 window.location 中的 hash 属性。将路由路径添加到 URL 的 hash 值中,然后在 JavaScript 中通过监听 hash 值的变化,来响应路由变化。Hash 模式还支持 hashchange 事件,可以在 URL 变化时触发回调函数。

优缺点
优点:Hash 模式的最大特点在于支持在所有浏览器中运行。同时,因为 Hash 路径不会被发送到服务器,因此可以避免服务器配置的问题。

缺点:Hash 模式的 URL 看起来比较难看,因为所有路由信息被放在 URL 的 hash 中。同时,网站爬虫无法识别路由路径,因此不适合用于 SEO。

总结来说,History 模式和 Hash 模式都是用于前端路由的常见机制。History 模式的 URL 更加美观但需要 HTML5 支持,Hash 模式的 URL 不美观但是更加兼容性。开发者在选择路由模式时需要根据具体的项目需求进行权衡。

History

History 模式是通过 HTML5 引入的新特性,它使用浏览器的 History API 来管理历史记录。在 History 模式下,通过设置 HTML5 标准中的 popState 方法,以及 pushState 和 replaceState 方法,可以在不刷新页面的情况下,更改浏览器的 URL。

原理
在 History 模式下,路由的核心机制是使用浏览器提供的 popstate 事件来响应 URL 的变化。在页面加载时,历史堆栈中的当前状态会被保存下来,每当用户点击浏览器的 “前进” 或 “后退” 按钮时,浏览器就会触发 popstate 事件,并通过该事件传递到 JavaScript 中的状态对象。这样,通过监听该事件对象,我们就可以在浏览器中实现前端路由。

优缺点
优点:History 模式的 URL 更加美观,用户体验更加友好。同时,由于完整的 URL 可以被搜索引擎识别,因此更加便于 SEO。

缺点:由于 History 模式需要浏览器支持 HTML5 的 History API,因此在老版本的浏览器中可能无法正常运行。在没有特殊配置的情况下,在后端服务器上的 URL 不正确时,将会返回 404 错误,这需要特殊的服务器配置以支持 History 模式。

popState , pushState 和 replaceState 应用

当使用 History API 进行前端路由时,可以使用以下三个方法来管理浏览器历史记录和 URL:

popState 方法

popState 方法用于监听页面历史记录的变化,当用户点击浏览器的 “前进” 或 “后退” 按钮时,会触发该方法。

window.addEventListener('popstate', function(event) {// 历史记录发生变化时的处理逻辑// event.state 可以获取当前历史记录的状态对象
});

这个方法将触发一个 popstate 事件,并提供了 event.state 属性,可以使用该对象来获取当前历史记录的状态。

pushState 方法

pushState 方法用于向浏览器的历史记录中添加一个新的状态,并且不会引起页面的刷新。

history.pushState(state, title, url);

state:需要保存到历史记录的状态对象。
title:网页的标题,目前大多数浏览器都不会显示这个参数。
url:要添加的新的 URL 地址。
这个方法可以在不刷新页面的情况下修改浏览器的 URL,并向历史记录添加一个新的状态。

replaceState 方法

replaceState 方法用于替换当前历史记录中的状态,而不会创建一个新的历史记录。

history.replaceState(state, title, url);

state:需要保存到历史记录的新状态对象。
title:网页的标题,目前大多数浏览器都不会显示这个参数。
url:要替换的新的 URL 地址。
这个方法将当前历史记录中的状态替换为新的状态,而不会创建一个新的历史记录条目。页面的 URL 也将被替换为新的 URL。

这些 History API 方法使得开发者能够在前端实现路由切换和历史记录管理,并且能够在不刷新整个页面的情况下,根据需要修改浏览器 URL 和历史记录的状态。这样可以增强用户体验,实现单页应用(SPA)的路由功能。

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

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

相关文章

gitlab高级功能之CI/CD组件 - 实践(二)

上一篇主要讲解了CI/CD组件的原理,看起来稍微有一点枯燥,那么接下来给大家演示下如何使用。 案例 创建一个项目(README.md,template目录) 案例1 step1: 在template中新建yml文件,cat templates/test-st…

Verilog 入门(六)行为建模

文章目录 过程结构initial 语句always 语句 事件控制语句块顺序语句块并行语句块 过程性赋值阻塞性过程赋值非阻塞性过程赋值 过程结构 下述两种语句是为一个设计的行为建模的主要机制: initial 语句always 语句 一个模块中可以包含任意多个 initial 或 always 语…

C/C++11 语法/概念易错总结(1)

文章目录 缺省参数函数重载引用引用和指针内联宏的优缺点auto范围forNULL和nullptr 缺省参数 半缺省参数必须从右往左依次来给出&#xff0c;不能间隔着给 void Func(int a, int b 10, int c 20){cout<<"a "<<a<<endl;cout<<"b &…

一些ab命令

1.ab简介 ab是apache自带的压力测试工具&#xff0c;是apachebench命令的缩写。ab非常实用&#xff0c;它不仅可以对apache服务器进行网站访问压力测试&#xff0c;也可以对或其它类型的服务器如nginx、tomcat、IIS等进行压力测试。 ab的原理&#xff1a;ab命令会创建多个并发…

在编程中遇到的问题总结

IDEA空包粘黏问题 创建好目录以后会发现idea自动将空包合并在一起了&#xff0c;而且点击设置里面也没有Compact Middle Package Compact Middle Package如果不在设置的主面板上&#xff0c;则点击Tree Appearance&#xff0c;会发现Compact Middle Package在Tree Appearance里…

elupload base64

创作灵感也许就是这会儿还没有入睡吧&#xff0c;对接百度图片OCR功能&#xff0c;需要将图片转为BASE64上传调用百度的接口api&#xff0c;进行研究实现。页面如下&#xff0c;点击后选择图片文件后不是直接上传&#xff0c;而是获取图片的bytes数据&#xff01; <el-uploa…

516. 最长回文子序列

给你一个字符串 s &#xff0c;找出其中最长的回文子序列&#xff0c;并返回该序列的长度。 子序列定义为&#xff1a;不改变剩余字符顺序的情况下&#xff0c;删除某些字符或者不删除任何字符形成的一个序列。 示例 1&#xff1a; 输入&#xff1a;s "bbbab" 输出…

力扣117. 填充每个节点的下一个右侧节点指针 II

“递归” 思路&#xff1a; 基于节点&#xff0c;创建下一层&#xff08;L 1&#xff09;节点的 next 指针&#xff1a; 确定当前节点下一层节点 next 链表的起始节点&#xff0c;迭代到需要找非孩子的 next 节点时&#xff0c;根据其当层&#xff08;L&#xff09; next 链表…

IO / day01 作业。

1.使用fgets统计一个文件的行号 //使用fgets统计一个文件的行号#include <string.h> #include <stdlib.h> #include <stdio.h>int main(int argc, const char *argv[]) {if(argc<2) //获取文件名{printf("input error\n!");printf("usage…

将不同时间点的登录状态记录转化为不同时间段的相同登录状态SQL求解

题目 有不同时间点的登录状态记录表state_log如下 请使用sql将其转化为如下表的不同时间段的相同登录状态记录 思路分析&#xff1a; 此类问题需要用到lag或lead函数取上下行对应的数据&#xff0c;然后对前后结果做比较打标签&#xff08;0或1&#xff09;&#xff0c;再…

pycharm中绘制一个3D曲线

import numpy as np import matplotlib.pyplot as plt # 中文的设置 import matplotlib as mp1 from mpl_toolkits.mplot3d import Axes3D mp1.rcParams["font.sans-serif"] ["kaiti"] mp1.rcParams["axes.unicode_minus"] False # 数据创建 X…

基于SSM的经典电影推荐网站设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

从react到xflow

从react到xflow 注意&#xff1a;xflow 1.0版本已经停止维护&#xff0c;2.0版本目前没有任何文档&#xff0c;也不太推荐使用 0、学习目标 可以使用react框架构建出前端web页面&#xff0c;并且使用xflow插入流程图 1、为什么要使用react&#xff1f; 优点&#xff1a;使用…

解决VSCode按住Ctrl(or Command) 点击鼠标左键不跳转的问题(不能Go to Definition)

问题出现 往往在升级了VSCode以后&#xff0c;就会出现按住Ctrl&#xff08;or Command&#xff09; 点击鼠标左键不跳转的问题&#xff0c;这个问题很常见。 解决办法 1 进入VScode的首选项&#xff0c;选择设置 2 输入Go to definition&#xff0c;找到如下两个设置&#…

如何创建百科?建立百科词条的意义何在?九问百科营销

在营销工作实践中&#xff0c;小马识途营销顾问经常接到关于百科营销的咨询&#xff0c;现整理了最受关注的九个问题分享给热爱营销工作的小伙伴。 一、什么是百科营销&#xff1f; 百科营销是借助百科知识传播&#xff0c;可以将企业、品牌、人物所拥有的对用户有价值的信息&a…

【存储测试】fio存储性能测试工具

一、前言 GitHub地址&#xff1a;fio 官方文档&#xff1a;HOWTO 1、介绍 fio&#xff08;flexible I/O Tester&#xff09; 是一款由 Jens Axboe 开发的用于测评和压力/硬件验证的自由开源的软件&#xff0c;适用于文件及块接口性能测试。 fio常用的I/O引擎主要分为以下两种…

熬夜会秃头——beta冲刺Day3

这个作业属于哪个课程2301-计算机学院-软件工程社区-CSDN社区云这个作业要求在哪里团队作业—beta冲刺事后诸葛亮-CSDN社区这个作业的目标记录beta冲刺Day3团队名称熬夜会秃头团队置顶集合随笔链接熬夜会秃头——Beta冲刺置顶随笔-CSDN社区 目录 一、团队成员会议总结 1、成员…

【算法】单调栈题单——字典序最小⭐(一种类型的模板题)

文章目录 题目列表316. 去除重复字母⭐⭐⭐⭐⭐&#xff08;类型题模板&#xff1a;单调栈&#xff0c;字典序最小&#xff09;221021天池-03. 整理书架&#xff08;保留数量为 limit 的字典序最小&#xff09;402. 移掉 K 位数字&#xff08;最多删除 k 次 前导零的处理&…

springboot + vue 智能物流管理系统

qq&#xff08;2829419543&#xff09;获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;springboot 前端&#xff1a;采用vue技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xf…

『 Linux 』环境变量

文章目录 &#x1f680;什么是环境变量&#x1f680;&#x1f680;查看环境变量&#x1f680;&#x1f579;️和环境变量有关的命令&#x1f579;️ &#x1f680;PATH环境变量&#x1f680;&#x1f579;️设置PATH环境变量&#x1f579;️ &#x1f680;HOME环境变量&#x1…