h5 history模式是什么

H5 History模式是一种前端路由的实现方式,与Hash模式不同,它利用了HTML5的history API,通过在真实url后面拼接“/”来实现路由的路径。在这种模式下,当“/”后的路径发生变化时,浏览器会重新发起请求,而不是触发onhashchange事件。通过这种方式,可以实现无刷新跳转的功能。

以下是一个使用HTML5 History API实现前端路由的简单例子:

<!DOCTYPE html>  
<html>  
<head>  
  <title>H5 History Mode Example</title>  
</head>  
<body>  
  <ul>  
    <li><a href="/" οnclick="navigateTo('/')">Home</a></li>  
    <li><a href="/about" οnclick="navigateTo('/about')">About</a></li>  
    <li><a href="/contact" οnclick="navigateTo('/contact')">Contact</a></li>  
  </ul>  
  
  <div id="content"></div>  
  
  <script>  
    // 处理路由变化  
    function handleRoute(route) {  
      // 根据路由显示不同的内容  
      switch (route) {  
        case '/':  
          document.getElementById('content').innerHTML = 'Home page';  
          break;  
        case '/about':  
          document.getElementById('content').innerHTML = 'About page';  
          break;  
        case '/contact':  
          document.getElementById('content').innerHTML = 'Contact page';  
          break;  
        default:  
          document.getElementById('content').innerHTML = 'Not found';  
      }  
    }  
  
    // 导航到不同的路由  
    function navigateTo(route) {  
      history.pushState(null, null, route); // 修改浏览器地址栏显示的URL,但不刷新页面  
      handleRoute(route); // 处理路由变化,显示对应的内容  
    }  
  
    // 监听浏览器的前进后退按钮事件  
    window.addEventListener('popstate', function(event) {  
      handleRoute(location.pathname); // 处理路由变化,显示对应的内容  
    });  
  </script>  
</body>  
</html>

在这个例子中,我们使用了HTML5的History API中的history.pushState()方法来修改浏览器的地址栏显示的URL,但不刷新页面。当用户点击导航链接时,会调用navigateTo()函数,将新的路由传递给handleRoute()函数处理,并显示对应的内容。同时,我们还监听了浏览器的前进后退按钮事件,当用户点击这些按钮时,会触发popstate事件,然后调用handleRoute()函数处理路由变化,并显示对应的内容。

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

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

相关文章

C#的checked关键字判断是否溢出

目录 一、定义 二、示例&#xff1a; 三、生成&#xff1a; 一、定义 使用checked关键字处理溢出。 在进行数学运算时&#xff0c;由于变量类型不同&#xff0c;数值的值域也有所不同。如果变量中的数值超出了变量的值域&#xff0c;则会出现溢出情况&#xff0c;出现溢出…

redis安装部署启动

1、Redis概述 1.1 Redis介绍 Redis是用C语言开发的一个开源的高性能键值对&#xff08;key-value&#xff09;数据库。它通过提供多种键值数据类型来适应不同场景下的存储需求&#xff0c;目前为止Redis支持的键值数据类型如下&#xff1a; 字符串类型 散列类型 列表类型 …

12.21自动售货机,单物品,多物品

自动售货机 if朴素方法 一种思路是用寄存器cnt记录已有的最小单位货币量&#xff0c;这里就是0.5 当d1时&#xff0c;cnt1;d2时&#xff0c;cnt2;d3时&#xff0c;cnt4; timescale 1ns/1ns module seller1(input wire clk ,input wire rst ,input wire d1 ,input wire d2 …

vue3 组件之间传值

vue3 组件之间传值 非常好&#xff0c;为啥突然开这样一篇博文&#xff0c;首先是因为 vue3 是未来发展的趋势。其次&#xff0c;vue 官方已经确认&#xff0c;将于2023年最后一天停止对 vue2 项目的维护&#xff0c;这个是官方发出的通知&#xff0c;并且呢&#xff0c;尤雨溪…

Mybatis SQL构建器类 - SQL类

下面是一些例子&#xff1a; // Anonymous inner class public String deletePersonSql() {return new SQL() {{DELETE_FROM("PERSON");WHERE("ID #{id}");}}.toString(); }// Builder / Fluent style public String insertPersonSql() {String sql new…

使用umi中的useRequest函数获取返回值中的data为空的问题

umi是一个react脚手架&#xff0c;最近有一个功能&#xff0c;需要在组件第一次渲染前请求一次&#xff0c;后面组件重新渲染不需要再次发送请求。要实现这种功能&#xff0c;我决定使用umi里面的一个hook函数&#xff0c;即useRequest。请求代码如下 const {data:categorys}u…

使用gitpages搭建博客

1 介绍 博客整体效果。在线预览我的博客&#xff1a;https://taot-chen.github.io 支持特性 简约风格博客Powered By Jekyll博客文章搜索自定义社交链接网站访客统计Google Analytics 网站分析Gitalk评论功能自定义关于about页面支持中文布局支持归档与标签 2 新建博客 git…

AI论文范文:AIGC中的图像转视频技术研究

声明&#xff1a; ⚠️本文由智元兔AI写作大师生成&#xff0c;仅供学习参考智元兔-官网|一站式AI服务平台|AI论文写作|免费论文扩写、翻译、降重神器 1 引言 1.1 AIGC技术背景介绍 1.2 图像转视频技术的重要性与应用场景 1.3 研究动机与目标 2 相关工作回顾 2.1 图像转视…

面试算法78:合并排序链表

题目 输入k个排序的链表&#xff0c;请将它们合并成一个排序的链表。 分析&#xff1a;利用最小堆选取值最小的节点 用k个指针分别指向这k个链表的头节点&#xff0c;每次从这k个节点中选取值最小的节点。然后将指向值最小的节点的指针向后移动一步&#xff0c;再比较k个指…

基于51单片机的智能车寻迹系统设计与实现

一、摘要 随着科技的不断发展&#xff0c;智能车在人们生活中的应用越来越广泛。智能车寻迹系统是智能车的一个重要组成部分&#xff0c;它能够使智能车在各种复杂环境中自动识别并沿着预定的轨迹行驶。本文主要介绍了一种基于单片机的智能车寻迹系统的设计与实现方法。该系统…

统信UOS及麒麟KYLINOS操作系统上设置GRUB密码

原文链接&#xff1a;给单用户模式上一层保险&#xff01;&#xff01;&#xff01; hello&#xff0c;大家好啊&#xff01;今天我要给大家介绍的是在统信UOS及麒麟KYLINOS操作系统上设置GRUB密码的方法。GRUB&#xff08;GRand Unified Bootloader&#xff09;是Linux系统中的…

利用F12和Fiddler抓包

网络基础 http 而http协议又分为下面的部分,点击具体条目后可以查看详细信息 http请求消息:请求行(请求方法),请求路径,请求头,请求体(载荷) http响应消息:响应行(响应状态码),响应头&#xff0c;响应体 请求行 即请求方法 get post put patch 响应行 即响应码,常见响应状态…

祖先是否安宁,直接关系到个人以及家运哦!

一直以来&#xff0c;中国古代流传下来的思想就认为&#xff0c;祖先安葬在好的风水福地&#xff0c;一定能给子孙后代带来吉祥如意。相反的&#xff0c;假如祖坟风水不好&#xff0c;则会影响到后人的运气&#xff0c;轻者诸事不顺、重者家庭破裂、噩运连连&#xff0c;所以&a…

【C++杂货铺】C++11新特性——lambda

文章目录 一、C98中的排序二、先来看看 lambda 表达式长什么样三、lambda表达式语法3.1 捕捉列表的使用细节 四、lambda 的底层原理五、结语 一、C98中的排序 在 C98 中&#xff0c;如果要对一个数据集合中的元素进行排序&#xff0c;可以使用 std::sort 方法&#xff0c;下面…

Nvblox ROS1 安装配置

安装并配置Nvblox ROS1 下载Nvblox ROS1 mkdir -p ~/nvblox_ros1_ws/src/ mkdir ~/data cd ~/nvblox_ros1_ws/src/ git clone https://github.com/ethz-asl/nvblox_ros1.git cd nvblox_ros1 git submodule update --init --recursive安装Docker for pkg in docker.io docke…

二叉树顺序结构与堆的概念及性质(c语言实现堆)

上次介绍了树&#xff0c;二叉树的基本概念结构及性质&#xff1a;二叉树数据结构&#xff1a;深入了解二叉树的概念、特性与结构 今天带来的是&#xff1a;二叉树顺序结构与堆的概念及性质&#xff0c;还会用c语言来实现堆 文章目录 1. 二叉树的顺序结构2.堆的概念和结构3.堆…

推荐几个开源HTTP服务接口快速生成工具

在现在流行微服务、前后端分离软件开发架构下&#xff0c;基于标准RESTful/JSON的HTTP接口已经成为主流。在实际业务中有很多需要快速开发调用数据服务接口的需求&#xff0c;但团队中缺乏专业的后端开发人员&#xff0c;比如&#xff1a; &#xff08;1&#xff09;数据库表已…

PHP开发日志 ━━ 基于PHP和JS的AES相互加密解密方法详解(CryptoJS) 适合CryptoJS4.0和PHP8.0

最近客户在做安全等保&#xff0c;需要后台登录密码采用加密方式&#xff0c;原来用个base64变形一下就算了&#xff0c;现在不行&#xff0c;一定要加密加key加盐~~ 前端使用Cypto-JS加密&#xff0c;传输给后端使用PHP解密&#xff0c;当然&#xff0c;前端虽然有key有盐&…

如何学习计算机编程?零基础入门,轻松成为编程达人!

在这个信息爆炸的时代&#xff0c;计算机编程已经成为一项炙手可热的技能。如果你也对编程充满兴趣&#xff0c;但又不知从何入手&#xff0c;那么本文将为你提供一条通往编程世界的捷径。掌握了这些技巧&#xff0c;相信你一定能够轻松成为编程达人&#xff01; 一、选择合适…

lag-llama源码解读(Lag-Llama: Towards Foundation Models for Time Series Forecasting)

Lag-Llama: Towards Foundation Models for Time Series Forecasting 文章内容&#xff1a; 时间序列预测任务&#xff0c;单变量预测单变量&#xff0c;基于Llama大模型&#xff0c;在zero-shot场景下模型表现优异。创新点&#xff0c;引入滞后特征作为协变量来进行预测。 获得…