hash路由模式

hash模式


hash模式是一种把前端路由的路径用井号 # 拼接在浏览器 URL 后面的模式。

一个完整的 URL 包括:协议、域名、端口、虚拟目录、文件名、参数、锚。

https://www.wangyuegyq.top/utils/index.html?name=123&phone=123#home
  • 协议:https
  • 域名:www.wangyuegyq.top
  • 端口号:443,https默认端口号是443,http默认端口号是80,默认端口号可以不写
  • 虚拟目录:/utils
  • 文件名:index.html
  • 参数:name=123&phone=123
  • 锚部分:home(#后面的值)

hash作用


  1. 路由

    hash值的变化,会触发hashchange事件,这样我们就可以通过监听hashchanges事件来根据不同的hash值去渲染不同的UI,以实现路由切换的目的。

    更改路由方式:

    (1)a标签

    (2)location.hash、location.href

    (3)浏览器前进后退按键或者history.back、history.go、history.forward

    (4)history.pushState、history.replaceState(H5 history 新特性)

    <div><a href="#home">首页</a><a href="#article">文章</a><div id="content"></div>
    </div>
    <script>window.onhashchange = (event) => {const hash = window.location.hash;const content = document.getElementById('content');if (hash === '#home') {content.innerHTML = '首页'; } else if (hash === '#article') {content.innerHTML = '文章'; }}
    </script>
    
  2. 定位

    hash也称作锚点,DOM id 结合,可以用于页面定位。

    <div>
    <span id="hash-position">定位点</span>
    <a href="#hash-position">点击定位</a>
    </div>
    

hash特点


  • hash的改变,不会访问服务器,不会刷新页面(hash 值是网页的标志位,HTTP 请求不包含锚部分,不会发送给服务器,对后端无影响)

  • hash的改变,会触发hashchange监听事件

  • hash的改变,会改变浏览器的历史记录

    hash

    这也是为什么当hash的改变(hash的改变会记录在window.hisotry中),不仅仅可以出触发hashchange事件,还会触发popstate事件(监听history对象变化的事件)

注意事项:


1. 如果改变的hash值与当前的hash值一致时,hashchang不会改变,但是popstate事件会执行(location.href更改时,执行,但是location.hash更改时,不会执行,两者执行时,都不会创建一条新的历史记录)。

2. 哪怕新的hash值和当前的hash值相同时,history.pushState方法会创建一条新的历史记录

更多内容,访问:

history
hash
单页面应用和多页面应用
React-Router源码分析-History库
History库源码分析-Action 动作类型
History库源码分析-createLocation
History库源码分析-createPath
History库源码分析-parsePath

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

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

相关文章

Windows 11 配置 ssh server 服务

Windows 11 配置 ssh server 服务 1. 安装 ssh server配置 ssh key 登陆设置默认使用 Powershell设置默认访问路径启动 sshd 和设置开机自动启动安装 vim (Powershell 中可以直接使用) 1. 安装 ssh server 打开 “设置” 》 “应用”&#xff0c;然后打开 “可选配置”&#x…

Django之视图层

目录 一、三板斧的使用 二、JsonReponse序列化类的使用 三、 form表单上传文件 数据准备 数据处理 (1)post请求数据 (2)文件数据获取 四、 FBV与CBV 五、CBV的源码分析 as_view 方法 一、三板斧的使用 HttpResponse 返回字符串类型render 渲染html页面&#xff0c;并…

【ROS】RViz2源码分析(二):main函数及编译配置详解

【ROS】郭老二博文之:ROS目录 1、main函数 #include <memory> #include <string> #include <vector>#include <QApplication>

考虑区域多能源系统集群协同优化的联合需求侧响应模型(matlab代码)

该程序复现《考虑区域多能源系统集群协同优化的联合需求侧响应模型》文献模型&#xff0c;程序的核心是对多个区域级多能源系统互联系统进行多目标优化&#xff0c;并且考虑联合需求侧响应&#xff0c;以多个区域多能源系统运行总成本最小、碳排放最小为目标&#xff0c;建立多…

EventEmitter3在vue中的使用

前提 vue中的组件传递方式有很多&#xff0c;包括父子组件之间的传值&#xff08;props&#xff0c;emit&#xff09;、事件总线&#xff08;$ bus&#xff09;、状态管理模式&#xff08;vuex&#xff0c;pinia&#xff09;&#xff0c;现在推荐一种可以替代$bus的一种传值方…

几种常用的排序

int[] arr new int[]{1, 2,8, 7, 5};这是提前准备好的数组 冒泡排序 public static void bubbleSort(int[] arr) {int len arr.length;for (int i 0; i < len - 1; i) {for (int j 0; j < len - i - 1; j) {if (arr[j] > arr[j1]) {int temp arr[j];arr[j] ar…

openresty安装配置,执行shell脚本

下载并解压 OpenResty 源代码&#xff1a; bashCopy code wget https://openresty.org/download/openresty-1.19.9.1.tar.gz tar -zxvf openresty-1.19.9.1.tar.gz cd openresty-1.19.9.1 运行 ./configure 并指定安装路径&#xff1a; bashCopy code ./configure --prefix…

【已解决】启动SSH服务报“could not load host key”错误

文章目录 问题复现解决方案 问题复现 解决方案 yum remove openssh-* && yum install -y openssl openssh-server && systemctl restart sshd

Django路由层之有名分组和无名分组、反向解析、路由分发、伪静态的概念、名称空间、虚拟环境、Django1和Django2的区别

【1】无名分组 无名分组&#xff1a;就是把正则中小括号里噩匹配到的内容以位置参数的形式传递给视图函数 url(r^test/(\d)$,view.text) get请求的第一种方式&#xff1a; http://127.0.0.1:8000/test/?a1&b2 get请求的第二种方式&#xff1a; http://127.0.0.1:8000/test…

Java架构师分布式搜索数据准确性解决方案

目录 1 Elasticsearch内置分词器1.1 Standard(标准分词器)1.2 Simple(简单分词器)1.3 Whitespace(空格分词器)1.4 Stop(停止分词器)1.5 Keyword(关键字分词器)1.6 Pattern(模板分词器)1.7 Language(语言分词器)1.8 Fingerprint(指纹分词器)2 Es 模糊查询 match…

SELinux零知识学习十、SELinux策略语言之客体类别和许可(4)

接前一篇文章&#xff1a;SELinux零知识学习九、SELinux策略语言之客体类别和许可&#xff08;3&#xff09; 一、SELinux策略语言之客体类别和许可 3. 有效的客体类别 本节对Fedora Core 4&#xff08;FC4&#xff09;可用的内核客体类别做一个概述&#xff0c;目标是描述客…

[容器][Docker]Docker参数设置

refs: http://www.hangdaowangluo.com/archives/2431 容器内存相关 memory.limit_in_bytes # 限制容器使用交换分区和内存的总和&#xff0c;在默认情况下&#xff0c;总的内存限定值(内存交换分区)被设置为了内存限定值的两倍 memory.memsw.limit_in_bytes

《Effective C++》条款14

在资源管理类中小心copying行为 你写了一个用来管理锁的RAII对象&#xff1a; class Lock { public:Lock(mutex* m):mtx(m){mtx->lock();}~Lock(){mtx->unlock();} private:mutex* mtx; }; 关于拷贝RAII对象&#xff0c;你应该考虑这些&#xff1a; 1.禁止复制。 将copyi…

Qt 之自定义控件(开关按钮)

Qt 之自定义控件&#xff08;开关按钮&#xff09; 原理源码运行结果 接触过IOS系统的童鞋们应该对开关按钮很熟悉&#xff0c;在设置里面经常遇到&#xff0c;切换时候的滑动效果比较帅气。 通常说的开关按钮&#xff0c;有两个状态&#xff1a;on、off。 下面&#xff0c;我们…

网工内推 | 国企、上市公司售前,CISP/CISSP认证,最高18K*14薪

01 中电福富信息科技有限公司 招聘岗位&#xff1a;售前工程师&#xff08;安全&#xff09; 职责描述&#xff1a; 1、对行业、用户需求、竞争对手等方面提出分析报告&#xff0c;为公司市场方向、产品研发和软件开发提供建议&#xff1b; 2、负责项目售前跟踪、技术支持、需…

【软考篇】中级软件设计师 第四部分(三)

中级软件设计师 第四部分&#xff08;三&#xff09; 三十四. 结构化开发方法34.1 内聚34.2 耦合 三十五. 测试基础知识三十六. 面向对象36.1 UML图36.2 设计模式36.3 数据流图 读前须知&#xff1a; 【软考篇】中级软件设计师 学前须知 上一章节&#xff1a; 【软考篇】中级软…

字母异位词分组[中等]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给你一个字符串数组&#xff0c;请你将字母异位词组合在一起。可以按任意顺序返回结果列表。字母异位词是由重新排列源单词的所有字母得到的一个新单词。 示例 1: 输入: strs ["eat", "tea", "tan"…

C# 泛型介绍

C# 中的泛型&#xff08;Generics&#xff09;是一种强类型参数化的特性&#xff0c;它允许你编写不具体指定数据类型的代码&#xff0c;而在实际使用时再指定具体的类型。泛型的引入使得代码更加灵活、可重用&#xff0c;并提高了类型安全性。 C#泛型基本用法 以下是一个简单…

【全网首发】【Python】Python控制parrot ARDrone 2.0无人机

&#x1f389;欢迎来到Python专栏~Python控制parrot ARDrone 2.0无人机 ☆* o(≧▽≦)o *☆嗨~我是小夏与酒&#x1f379; ✨博客主页&#xff1a;小夏与酒的博客 &#x1f388;该系列文章专栏&#xff1a;Python学习专栏 文章作者技术和水平有限&#xff0c;如果文中出现错误…

交换机聚合配置 (H3C)

交换机聚合配置 &#xff08;H3C&#xff09; 聚合是什么如何配置聚合 聚合是什么 链路聚合是将两个或更多数据信道结合成一个单个的信道&#xff0c;该信道以一个单个的更高带宽的逻辑链路出现。一般用来连接一个或多个带宽需求大的设备&#xff0c;例如连接骨干网络的服务器…