深入理解 hash 和 history:网页导航的基础(下)

在这里插入图片描述

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

  • 五、使用 hash 和 history 的场景
    • 适合使用 hash 的场景
    • 适合使用 history 的场景
  • 六、实际案例分析
    • 通过具体的代码示例来演示 hash 和 history 的用法
  • 七、注意事项和最佳实践
    • 使用 hash 和 history 时需要注意的一些问题
    • 一些最佳实践和建议
  • 八、总结
    • 总结 hash 和 history 的作用和应用场景

五、使用 hash 和 history 的场景

适合使用 hash 的场景

适合使用hash的场景包括:

  1. 简单的单页面应用(SPA):如果应用只有少数几个页面,或者页面之间的导航相对简单,可以使用hash来实现。

  2. 兼容性要求较高的应用:由于hash方式在所有的浏览器中都能正常工作,因此如果应用需要支持较旧的浏览器或移动设备,可以选择hash

  3. 不需要与服务器端进行交互的应用:如果应用不需要与服务器端进行交互,或者服务器端不需要处理 URL 中的hash部分,可以使用hash

  4. 快速开发原型:在开发初期或快速搭建原型时,可以使用hash方式,因为它相对简单,不需要太多的配置和代码。

在这里插入图片描述

总的来说,hash方式适用于简单的、兼容性要求较高的、不需要与服务器端进行交互的应用,或者在开发初期快速搭建原型时使用。

适合使用 history 的场景

适合使用history的场景包括:

  1. 复杂的单页面应用(SPA):如果应用有多个页面或路由状态,需要进行复杂的页面导航和状态管理,可以使用history来实现。

  2. 需要与服务器端进行交互的应用:如果应用需要与服务器端进行交互,或者需要在服务器端处理 URL 中的路径部分,可以选择history

  3. 提供更好的用户体验:由于history方式的 URL 不带hash符号,看起来更像是正常的 URL,因此可以提供更好的用户体验。

  4. 移动应用:对于移动应用,使用history可以提供更流畅的用户体验,因为在移动设备上,使用hash可能会导致一些问题,如链接无法正常工作等。

在这里插入图片描述

总的来说,history方式适用于复杂的、需要与服务器端进行交互的、提供更好的用户体验的应用,或者在移动应用中使用。

六、实际案例分析

通过具体的代码示例来演示 hash 和 history 的用法

以下是使用hashhistory实现前端路由的简单示例代码。

  1. 使用hash的示例代码:

    // 创建一个路由器实例
    const router = new Router({mode: 'hash',routes: [{ path: '/', component: Home },{ path: '/about', component: About },],
    });// 监听路由变化
    router.onReady(() => {console.log('Router is ready!');
    });// 应用到 HTML 页面上
    <div id="app"><RouterView />
    </div>
    

    在上述示例中,使用了Vue.jsRouter模块来创建一个简单的路由器。通过设置modehash,可以使用hash方式进行路由。定义了两个路由路径/''/about',并分别对应HomeAbout组件。

  2. 使用history的示例代码:

    // 创建一个路由器实例
    const router = new Router({mode: 'history',routes: [{ path: '/', component: Home },{ path: '/about', component: About },],
    });// 监听路由变化
    router.onReady(() => {console.log('Router is ready!');
    });// 应用到 HTML 页面上
    <div id="app"><RouterView />
    </div>
    

    与使用hash的示例类似,只是将mode设置为history,以使用history方式进行路由。

请注意,在实际应用中,可能需要根据项目的具体需求进行一些配置和调整,例如处理页面的加载状态、设置basename等。这些示例只是提供了一个简单的框架,你可以根据自己的项目进行扩展和定制。

七、注意事项和最佳实践

使用 hash 和 history 时需要注意的一些问题

使用hashhistory时需要注意以下问题:

  • hash模式的优点:只需要前端配置路由表,不需要后端的参与;兼容性好,浏览器都能支持;hash值改变不会向后端发送请求,完全属于前端路由。缺点:hash值前面需要加#,不符合url规范,也不美观。
  • history模式的优点:符合url地址规范,不需要#,使用起来比较美观。缺点:在用户手动输入地址或刷新页面时会发起url请求,后端需要配置index.html页面用户匹配不到静态资源的情况,否则会出现404错误;兼容性比较差,是利用了HTML5 History对象中新增的pushState()和replaceState()方法,需要特定浏览器的支持。

在实际应用中,你可以根据具体需求和目标来选择使用哪种模式。如果你更注重前端的开发和维护,并且不需要与后端进行交互,那么hash模式可能更适合你;如果你希望实现更加直观和符合标准的url路径,并且后端支持对应的路由配置,那么history模式可能更适合你。

一些最佳实践和建议

以下是一些使用hashhistory的最佳实践和建议:

  1. 根据应用需求选择模式:如果你的应用主要是单页面应用,并且不需要与服务器端进行交互,或者对浏览器兼容性要求较高,那么可以选择hash模式。如果你需要更好的用户体验和 URL 结构,并且服务器端可以处理路由,那么可以选择history模式。

  2. 合理配置路由:无论是使用hash还是history,都需要合理配置路由。确保每个路由都有唯一的路径,并根据应用的逻辑进行组织。同时,为了避免冲突,建议使用命名路由。

  3. 处理页面加载状态:在使用history模式时,需要特别注意处理页面的加载状态。可以使用Vue.js的生命周期钩子函数来监听路由的变化,并在需要时进行数据加载或其他操作。

  4. 设置适当的basename:如果你的应用部署在子路径下,例如https://example.com/my-app/,那么可以设置basename来确保路由的正确工作。在Vue.js中,可以通过Router对象的basename属性来设置。

  5. 考虑浏览器兼容性history模式需要较新的浏览器版本支持。在使用history模式时,需要确保你的应用能够在目标用户的浏览器上正常工作。如果对兼容性有要求,可以考虑使用hash模式或提供降级方案。

  6. 测试和调试:在开发过程中,务必进行充分的测试,包括在不同浏览器和设备上进行测试。使用浏览器的开发者工具可以方便地调试路由和查看路由状态。

在这里插入图片描述

总之,选择使用hash还是history模式取决于你的应用需求和目标用户。合理配置路由、处理页面加载状态、设置适当的basename以及考虑浏览器兼容性是使用这两种模式的关键。

八、总结

总结 hash 和 history 的作用和应用场景

hashhistory是前端路由的两种模式,它们有不同的作用和应用场景:

  • hash模式:
    • 作用:根据当前的路由地址找到对应组件进行重新渲染。
    • 优点:不需要服务端的支持,在开发模式下使用。
    • 缺点:带有“#”,不够美观。
    • 应用场景:一般在生产或开发模式下使用。
  • history模式:
    • 作用:所有路由呈现都需要通过监听popstate事件,来进行相应的路由匹配和跳转。
    • 优点:没有“#”,使用真正的 URL 路径,较为美观。
    • 缺点:需要服务端的支持。
    • 应用场景:项目上线时,有服务端的支持时使用。

在实际应用中,你可以根据具体需求选择合适的路由模式。

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

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

相关文章

AUTOSAR ComM模块配置以及代码

ComM模块配置以及代码执行流程 1、基本的一个通道的配置列表 ComMNmVariant 概念的个人理解&#xff1a; FULL&#xff1a; 完全按照AUTOSAR NM方式进行调用 LIGHT &#xff1a;设置一个超时时间&#xff0c;在请求停止通信的时候开始计时&#xff0c;超时之后才会进入FULLCOM…

web之CSS悬停效果页面设计

参考小米商城的“手机”页面&#xff0c;做出一个“手机”的标签&#xff0c;实现当鼠标悬停在“手机”上时&#xff0c;出现手机系列菜单&#xff1b;当鼠标移走时&#xff0c;菜单页面消失的效果&#xff01; 参考图&#xff1a; 实现代码&#xff1a; <!DOCTYPE html&g…

基于双目RGB图像和图像深度信息的三维室内场景建模matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 双目视觉原理 4.2 深度信息获取 4.3 表面重建 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 .....................................…

接口测试--参数实现MD5加密签名规则

最近有个测试接口需求&#xff0c;接口有签名检查&#xff0c;签名规范为将所有请求参数按照key字典排序并连接起来进行md5加密&#xff0c;格式是&#xff1a;md5(bar2&baz3&foo1),得到签名&#xff0c;将签名追加到参数末尾。由于需要对参数进行动态加密并且做压力测…

2023年度佳作:AIGC、AGI、GhatGPT、人工智能大语言模型的崛起与挑战

目录 前言 01 《ChatGPT 驱动软件开发》 内容简介 02 《ChatGPT原理与实战》 内容简介 03 《神经网络与深度学习》 04 《AIGC重塑教育》 内容简介 05 《通用人工智能》 目  录 前言 2023年是人工智能大语言模型大爆发的一年&#xff0c;一些概念和英文缩写也在这一…

基于ssm物流管理系统论文

摘 要 本物流管理系统设计目标是实现物流的信息化管理&#xff0c;提高管理效率&#xff0c;使得物流管理作规范化、科学化、高效化。 本文重点阐述了物流管理系统的开发过程&#xff0c;以实际运用为开发背景&#xff0c;基于SSM框架&#xff0c;运用了Java编程语言和MYSQL数…

Azure Machine Learning - 提示工程简介

OpenAI的GPT-3、GPT-3.5和GPT-4模型基于用户输入的文本提示工作。有效的提示构造是使用这些模型的关键技能&#xff0c;涉及到配置模型权重以执行特定任务。这不仅是技术操作&#xff0c;更像是一种艺术&#xff0c;需要经验和直觉。本文旨在介绍适用于所有GPT模型的提示概念和…

Ubuntu 常用命令之 chmod 命令用法介绍

chmod是Linux系统下的一个命令&#xff0c;用于改变文件或目录的权限。它的名称是“change mode”的缩写。在Linux中&#xff0c;文件或目录的权限分为读&#xff08;r&#xff09;、写&#xff08;w&#xff09;和执行&#xff08;x&#xff09;三种&#xff0c;分别对应数字4…

【Azure 架构师学习笔记】- Azure Databricks (3) - 再次认识DataBricks

本文属于【Azure 架构师学习笔记】系列。 本文属于【Azure Databricks】系列。 接上文 【Azure 架构师学习笔记】- Azure Databricks (2) -集群 前言 在对Databricks有了初步了解之后&#xff0c;如果要深入使用则需要对其进行更深层次的了解。 Databricks ADB 是一个统一的…

os功能模板

【 一 】简介 os 就是 “operating system” 的缩写&#xff0c;顾名思义&#xff0c;os 模块提供的就是各种 Python 程序与操作系统进行交互的接口。通过使用 os 模块&#xff0c;一方面可以方便地与操作系统进行交互&#xff0c;另一方面页可以极大增强代码的可移植性。如果该…

全国职业院校技能大赛“大数据应用开发”赛项说明

1、赛项介绍 &#xff08;1&#xff09;赛项名称 全 国 职 业 院 校 技 能 大 赛 “大数据应用开发” 赛 项 职业院校技能大赛官网 (vcsc.org.cn)https://www.vcsc.org.cn/ 大赛组织机构介绍 全国职业院校技能大赛(以下简称大…

【数据结构】八大排序之希尔排序算法

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 一.优化直接插入排序算法 我们在之前对直接插入排序算法的优化部分通过对直接插入排序的分析可以得到一个结论,即: 进行直接插入排序的数组,如果越接近局部有序,则后续进行直…

电脑技巧:笔记本电脑保养技巧诀,让你的电脑多用几年

新到手的宝贝笔记本电脑爱不释手&#xff0c;要想它长久的陪伴&#xff0c;平时的维护与保养自然不能少&#xff0c;今天小编给大家分享一下&#xff0c;如何保养和维护笔记本的各个部件。 一、电 池 电池是笔记本实现移动办公的重要部件&#xff0c;电池状况直接影响了电池的…

最完整的Web视频加密播放技术实现(含技术调研和Demo源码)

大厂技术 高级前端 Node进阶 点击上方 程序员成长指北&#xff0c;关注公众号 回复1&#xff0c;加入高级Node交流群 作者&#xff1a;然燃 &#xff08;感谢小伙伴投稿分享&#xff09;原文链接: https://juejin.cn/post/7307934456995856419 最近又遇到了web视频化的场景&a…

Axure动态面板的使用

一. 动态面板 Axure动态面板是Axure RP软件中的一个功能模块&#xff0c;用于创建交互式原型和模拟应用程序的动态效果。它可以模拟用户在应用程序中的操作流程&#xff0c;并展示不同状态之间的变化&#xff0c;提供更真实的用户体验。通过创建不同的状态和添加交互效果&…

21--集合小案例

案例--图书管理系统 1.创建实体类Book package com.work.pojo; /** *Author: 憨憨浩浩 *CreateTime: 2023-12-16 17:27 *Description: Book实体类 */ public class Book {private int id; // 编号private String name; // 图书名称private String author;…

C++软件调试与异常排查技术从入门到精通学习路线分享

目录 1、概述 2、全面了解引发C软件异常的常见原因 3、熟练掌握排查C软件异常的常见手段与方法 3.1、IDE调试 3.2、添加打印日志 3.3、分块注释代码 3.4、数据断点 3.5、历史版本比对法 3.6、Windbg静态分析与动态调试 3.7、使用IDA查看汇编代码 3.8、使用常用工具分…

【AI】模型结构可视化工具Netron应用

随着AI模型的发展&#xff0c;模型的结构也变得越来越复杂&#xff0c;理解起来越来越困难&#xff0c;这时候能够画一张结构图就好了&#xff0c;就像我们在开发过程中用到的UML类图&#xff0c;能够直观看出不同层之间的关系&#xff0c;于是Netron就来了。 Netron支持神经网…

leetcode 236. 二叉树的最近公共祖先

leetcode 236. 二叉树的最近公共祖先 题目 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个节点 p、q&#xff0c;最近公共祖先表示为一个节点 x&#xff0c;满足 x 是 p、q 的祖先且 x 的深度尽…

Vue3使用Three.js导入gltf模型并解决模型为黑色的问题

背景 如今各类数字孪生场景对三维可视化的需求持续旺盛&#xff0c;因为它们可以用来创建数字化的双胞胎&#xff0c;即现实世界的物体或系统的数字化副本。这种技术在工业、建筑、医疗保健和物联网等领域有着广泛的应用&#xff0c;可以帮助人们更好地理解和管理现实世界的事…