前端路由解析(一) —— hash路由

简介: 前端路由解析(一) —— hash路由

640.jpg

写在前面


现在的前端应用很多都是单页应用。路由对于单页应用来说,是一个重要的组成部分。本系列文章将讲解前端路由的实现原理。这是系列文章的第一篇:hash路由。


hash


首先来说一说什么是hash。我们经常能看到这种url:


1、https://www.baidu.com/#1232、https://www.baidu.com/#234


url后面的#/123,就是hash值,可以通过下面的代码来获取:


window.location.hash// #123// #234


hash最初是用来进行页面快速定位的,当页面很长的时候,是很有用的,比如下面的例子:


<header>  <a href='#p1'>前往段落1</a>  <a href='#p2'>前往段落2</a>  <a href='#p3'>前往段落3</a></header><main>  <p id='p1'>11111111111111111111111111</p>  <p id='p2'>22222222222222222222222222</p>  <p id='p3'>33333333333333333333333333</p></main>


假设我们的三个</p>上下间距很大,点击最上面的</a>标签,可以迅速定位到对应的段落。像下面这样:


640.gif

我们也可以用过代码来控制hash值,同样可以达到定位的效果,比如:


window.location.hash = '#p2'


hash路由


当页面的hash值变化时,是可以监听到的:


window.addEventListener('hashchange', e => {    console.log(e); // HashChangeEvent     const oldUrl = e.oldURL; // 旧的页面地址    const newUrl = e.newURL; // 新的页面地址    const type = e.type // hashchange - 事件类型    const cancelable = e.cancelable; // false - 表示该事件无法取消。即无法通过e.preventDefault()阻止hash跳转});


hash路由就是利用了hash值变化可监听这一点来实现的。我们来实现一个最最简单的:


<body>    <header>        <a href='#p1'>前往段落1</a>        <a href='#p2'>前往段落2</a>        <a href='#p3'>前往段落3</a>    </header>    <main>        <div id="content">            这是首页        </div>    </main>    <script>        const routerMap = {            'p1': () => { document.getElementById('content').innerHTML = '这是段落1的内容' },            'p2': () => { document.getElementById('content').innerHTML = '这是段落2的内容' },            'p3': () => { document.getElementById('content').innerHTML = '这是段落3的内容' },        }        const handleRouter = e => {            const newURL = e && e.newURL || window.location.href;            const newHash = newURL.split('#').pop();            typeof routerMap[newHash] === 'function' && routerMap[newHash]();        };        window.addEventListener('hashchange', handleRouter);        window.addEventListener('load', handleRouter);</script></body>


最终的效果如下图所示:

640.gif



hash路由的兼容性很不错,可以兼容到IE8。并且,hash路由完全由前端就可以实现。


写在后面


本文解析了前端的hash,以及hash路由的实现原理,符合预期。其实很多看起来强大的功能,底层的原理其实很简单。后续会解析另一种常用的路由方式:history路由。


另外,一些我们平时不常用的api等,或许可以做很多事情。比如我之前这篇文章里讲的:


你可能不知道的LocalStorage用法

目录
打赏
0
0
0
0
29
分享
相关文章
调用DeepSeek API增强版纯前端实现方案,支持文件上传和内容解析功能
本方案基于DeepSeek API增强版,提供纯前端实现的文件上传与内容解析功能。通过HTML和JavaScript,用户可选择文件并调用API完成上传及解析操作。方案支持多种文件格式(如PDF、TXT、DOCX),具备简化架构、提高响应速度和增强安全性等优势。示例代码展示了文件上传、内容解析及结果展示的完整流程,适合快速构建高效Web应用。开发者可根据需求扩展功能,满足多样化场景要求。
1176 64
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
312 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
深入理解前端路由:原理、实现与应用
本书《深入理解前端路由:原理、实现与应用》全面解析了前端路由的核心概念、工作原理及其实现方法,结合实际案例探讨了其在现代Web应用中的广泛应用,适合前端开发者和相关技术人员阅读。
在数字化时代,利用DNS实现地理位置路由成为提升用户体验的有效策略
在数字化时代,利用DNS实现地理位置路由成为提升用户体验的有效策略。通过解析用户请求的来源IP地址,DNS服务器可判断其地理位置,并返回最近或最合适的服务器IP,从而优化网络路由,减少延迟,提高访问速度。示例代码展示了如何基于IP地址判断地理位置并分配相应服务器IP,实际应用中需结合专业地理数据库和动态调整机制,以应对复杂网络环境带来的挑战。
196 6
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
276 1
探索无界:前端开发中的响应式设计深度解析####
【10月更文挑战第29天】 在当今数字化时代,用户体验的优化已成为网站与应用成功的关键。本文旨在深入探讨响应式设计的核心理念、技术实现及最佳实践,揭示其如何颠覆传统布局限制,实现跨设备无缝对接,从而提升用户满意度和访问量。通过剖析响应式设计的精髓,我们将一同见证其在现代Web开发中的重要地位与未来趋势。 ####
124 7
探索无界:前端开发中的响应式设计深度解析与实践####
【10月更文挑战第29天】 本文深入探讨了响应式设计的核心理念,即通过灵活的布局、媒体查询及弹性图片等技术手段,使网站能够在不同设备上提供一致且优质的用户体验。不同于传统摘要概述,本文将以一次具体项目实践为引,逐步剖析响应式设计的关键技术点,分享实战经验与避坑指南,旨在为前端开发者提供一套实用的响应式设计方法论。 ####
201 4
深入理解HTTP/2:nghttp2库源码解析及客户端实现示例
通过解析nghttp2库的源码和实现一个简单的HTTP/2客户端示例,本文详细介绍了HTTP/2的关键特性和nghttp2的核心实现。了解这些内容可以帮助开发者更好地理解HTTP/2协议,提高Web应用的性能和用户体验。对于实际开发中的应用,可以根据需要进一步优化和扩展代码,以满足具体需求。
408 29

推荐镜像

更多
  • DNS
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等

    登录插画

    登录以查看您的控制台资源

    管理云资源
    状态一览
    快捷访问