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

2024-06-24 06:52

本文主要是介绍项目总结-前端路由hash和history,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

项目总结-前端路由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>

这篇关于项目总结-前端路由hash和history的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1089465

相关文章

Springboot项目启动失败提示找不到dao类的解决

《Springboot项目启动失败提示找不到dao类的解决》SpringBoot启动失败,因ProductServiceImpl未正确注入ProductDao,原因:Dao未注册为Bean,解决:在启... 目录错误描述原因解决方法总结***************************APPLICA编

在IntelliJ IDEA中高效运行与调试Spring Boot项目的实战步骤

《在IntelliJIDEA中高效运行与调试SpringBoot项目的实战步骤》本章详解SpringBoot项目导入IntelliJIDEA的流程,教授运行与调试技巧,包括断点设置与变量查看,奠定... 目录引言:为良驹配上好鞍一、为何选择IntelliJ IDEA?二、实战:导入并运行你的第一个项目步骤1

Spring Boot 与微服务入门实战详细总结

《SpringBoot与微服务入门实战详细总结》本文讲解SpringBoot框架的核心特性如快速构建、自动配置、零XML与微服务架构的定义、演进及优缺点,涵盖开发环境准备和HelloWorld实战... 目录一、Spring Boot 核心概述二、微服务架构详解1. 微服务的定义与演进2. 微服务的优缺点三

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.

Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式

《Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式》本文详细介绍如何使用Java通过JDBC连接MySQL数据库,包括下载驱动、配置Eclipse环境、检测数据库连接等关键步骤,... 目录一、下载驱动包二、放jar包三、检测数据库连接JavaJava 如何使用 JDBC 连接 mys

深度解析Java项目中包和包之间的联系

《深度解析Java项目中包和包之间的联系》文章浏览阅读850次,点赞13次,收藏8次。本文详细介绍了Java分层架构中的几个关键包:DTO、Controller、Service和Mapper。_jav... 目录前言一、各大包1.DTO1.1、DTO的核心用途1.2. DTO与实体类(Entity)的区别1

JavaSE正则表达式用法总结大全

《JavaSE正则表达式用法总结大全》正则表达式就是由一些特定的字符组成,代表的是一个规则,:本文主要介绍JavaSE正则表达式用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录常用的正则表达式匹配符正则表China编程达式常用的类Pattern类Matcher类PatternSynta

如何在Spring Boot项目中集成MQTT协议

《如何在SpringBoot项目中集成MQTT协议》本文介绍在SpringBoot中集成MQTT的步骤,包括安装Broker、添加EclipsePaho依赖、配置连接参数、实现消息发布订阅、测试接口... 目录1. 准备工作2. 引入依赖3. 配置MQTT连接4. 创建MQTT配置类5. 实现消息发布与订阅

springboot项目打jar制作成镜像并指定配置文件位置方式

《springboot项目打jar制作成镜像并指定配置文件位置方式》:本文主要介绍springboot项目打jar制作成镜像并指定配置文件位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录一、上传jar到服务器二、编写dockerfile三、新建对应配置文件所存放的数据卷目录四、将配置文