项目总结-前端路由hash和history

news/2024/7/24 0:46:12

项目总结-前端路由hash和history

router模块

路由需要实现的功能

  1. 当浏览器地址发生变化的时候,切换页面
  2. 点击浏览器后退前进的时候,网页内容发生变化
  3. 刷新浏览器,网页加载当前路由对应内容

路由主要是通过监听事件,并利用js实现动态改变网页内容,有两种实现方式

  1. hash模式:监听浏览器地址hash地址的变化,执行相应的js切换网页
  2. history模式:利用history API实现url地址改变,网页内容改变。

history和hash模式

history

window.history属性指向history对象,表示当前窗口的浏览历史,当发生改变的时候,会改变页面的路径,不会刷新页面,history对象保存了当前窗口访问过的所有页面网址

  • 通过pushState, replaceState来实现无感刷新跳转的功能。
和hash的区别
https://github.com/xxx
https://github.com/xxx/yyy
https://github.com/xxx/yyy/zzz

正常的页面应该是全部发生刷新,但是使用history模式,只有第一个会发生刷新,后面只会发生前端跳转,不会刷新页面。

存在的问题

对于history来说,解决了不少hash存在的问题,但是也带来的新的问题

  1. 使用history模式的时候,对当前的页面进行刷新的时候,此时浏览器会重新发起请求,如果nignx没有匹配得到当前的url, 就会出现404的页面
  2. 对于hash模式,虽然是改变了URL,但是不会被包括在http请求中,所以算是被用来知道浏览器的动作,不会影响服务端,改变hash不会改变真正的url,所以页面路径还是之前的路径,nginx也不会被拦截
  3. 因此,在使用history模式的时候,需要通过服务器来允许地址访问,如果没有出现这个设置,就容易出现导致404的出现。
hash

hash是URL中hash(#)及后面的那部分,也称散列值,常用作锚点来在页面中进行导航,改变URL中的hash部分不会引起页面刷新,不会随着请求发送到服务器。
所有的页面的跳转都是在客户端进行操作的,改变hash值不算是一个http请求,当前模式不适合seo优化。hash只能修改#后面的部分,所以只能跳转到当前url同文档的url。
通过hashchange事件监听URL的变化,可以通过location.hash来获取和设置hash值,通过浏览器的前进和后退触发网页跳转。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul><ul><!-- 定义路由 --><li><a href="#/home">home</a></li><li><a href="#/about">about</a></li><!-- 渲染路由对应的 UI --><div id="routeView"></div></ul></ul>
</body>
<script>let routerView = document.getElementById('routeView')window.addEventListener('hashchange', () => {routerView.innerHTML = location.hash})window.addEventListener('DOMContentLoaded', () => {if(!localtion.hash) {location.hash = "/"} else {let hash = location.hashrouterView.innerHTML = hash}})
</script>
</html>

http://wed.xjx100/news/1411894.html

相关文章

数据库期末复习知识点

A卷 1. 选择题(30) 2. 判断范式(10) 判断到第三范式 3. 程序填空(20) 4. 分析填空(15) 5. 写SQL(25) 5一题 恶性 B卷 1. 单选(30) 2. 填空 (20) 3. 程序填空(20) 4. 写SQL(30) 知识点 第一章 数据库管理系统(DBMS) 主要功能 数据定义功能 (DDL, 数据定义语言, …

Excel 宏录制与VBA编程 —— 11、工作表及工作簿操作(附:Worksheets与Sheets区别)

代码1 - Worksheets与Sheets区别 Worksheets表示普通工作表;Sheets即可表示普通工作表也可表示图标工作表。 下面模块中代码结果是一样的,大家理解时可结合上面区别说明进行了解 Sub Test()Worksheets("Sheet1").Range("A1").Value 100Sheets("Sheet…

[职场] 公务员的利弊分析 #知识分享#经验分享#其他

公务员的利弊分析 公务员作为一种稳定的职业选择&#xff0c;一直备受人们的关注。然而&#xff0c;就像任何其他职业一样&#xff0c;公务员职位也有其利与弊。本文将对公务员的利弊进行分析&#xff0c;帮助读者更好地了解这一职业的特点。 利&#xff1a; 1. 稳定的职业&a…

数据资产与人才战略:聚焦数据人才培养与引进,构建专业团队,为企业数据资产增值提供源源不断的智力支持,确保数据资产的高效利用与持续增长

一、引言 随着信息技术的飞速发展&#xff0c;数据已成为企业最宝贵的资产之一。在数字化时代&#xff0c;数据资产的高效利用和持续增长对于企业的竞争力至关重要。而要实现这一目标&#xff0c;人才是关键。本文将围绕数据资产与人才战略展开讨论&#xff0c;重点分析数据人…

B3996 [洛谷 202406GESP 模拟 三级] 小洛的数字游戏

题目描述 小洛有一个正整数 &#x1d45b;n&#xff0c;他会进行若干次下列操作&#xff1a; 取出正整数 &#x1d45b; 的末位&#xff0c;记作 &#x1d465;&#xff1b;将 &#x1d465;平方之后&#xff0c;保留个位&#xff0c;放于 &#x1d45b; 的首位之前&#xff…

Spring数据访问架构设计解析

一、Spring JDBC 数据访问 1、简化了jdbc操作&#xff0c;定义了模板类JdbcTemplate 2、提高开发效率&#xff0c;构建了嵌入式数据源EmbeddedDatabase 3、统一底层异常结构DataAccessException 二、Spring事物管理器 声明式事物&#xff0c;Aop原理简化开发 三、Spring …

筛斗数据:引领未来,以技术创新推动在线推广新纪元

在数字化浪潮的推动下&#xff0c;企业在线推广已成为市场拓展的关键手段。然而&#xff0c;在海量信息中精准定位目标用户&#xff0c;有效提升转化率&#xff0c;却是一大挑战。筛斗数据&#xff0c;作为一家专注于数据提取与分析的技术公司&#xff0c;正以其独特的技术优势…

2024.6.21总结1117(大爱西安)

今天距离领毕业证还剩下10天&#xff0c;这几天事情都处理的差不多了&#xff0c;在宿舍待得有些无聊&#xff0c;晚上在学校周围逛了一下。 大学生活即将结束&#xff0c;但我还是有些许不舍。我怎么也高兴不起来。我即将要离开这个宿舍&#xff0c;这个班级&#xff0c;这所…