当前位置： 首页 > news >正文

探究前端路由hash和history的实现原理（包教包会）

news 2025/9/15 14:15:58

今天我们来讲一讲前端中很重要的一个部分路由（router），想必前端小伙伴对‘路由’一词都不会感到陌生。但是如果哪天面试官问你，能大概说一说前端路由的实现原理吗？

你又会如何应对呢？

今天勇宝就带着大家一起来探究一下前端路由，来揭开‘她’的神秘面纱。

另外勇宝的网站已经可以正常访问了：www.iyongbao.cn

文章目录

  • 一、概念
  • 二、路由存在的意义
  • 三、路由的模式（hash和history）
    • 3.1 Hash模式
      • 3.1.1 代码实现
      • 3.1.2 效果展示
      • 3.1.3 小结
    • 3.2 History模式
      • 3.2.1 概念
      • 3.2.2 pushState和popstate
      • 3.2.3 代码实现
      • 3.2.4 小结
  • 四、总结

一、概念

路由这一概念起源于后端（服务器），就比如说我们前端经常会去访问服务器上的一些静态资源（图片、视频）就是我们所说的路由。

其实路由就是用来描述文件路径的一个概念。

像前端框架Vue单页应用（SPA）就是借鉴了路由，呈现的效果就是当我们的url地址栏发生变化展示相应的内容。

就好像键值对的key=value，让url和组件一一映射。

二、路由存在的意义

那么路由的好处是什么呢？

  • 通过使用路由可以实现：当我们的url发生变化不会引起页面的刷新；

    在学习HTML的时候，我们知道点击a标签会引起页面的刷新。

三、路由的模式（hash和history）

前端的路由跳转模式有两种：hash和history，是不是想起Vue和#字符了。
下面我们就来探讨一下

3.1 Hash模式

Hash中文名叫（哈希），好像在密码学中总是听到这个词。想起来了，这是一种算法，哈哈。具体原理我不太懂，只知道它会生成一串很长很长的值。比如我们的视频也是有哈希值的。

然后就是我们的浏览器，就拿Vue的router来说，当我们使用hash模式时，#号后面的任意值就是我们的哈希值。

http://www.iyongbao.cn/#/blog

回到刚才的问题：通过修改url的哈希值，并且不会引起页面的刷新。

下面我们就来一起实现一下前端路由的Hash模式，这是主要使用到了onhashchange事件来监听url的变化。

3.1.1 代码实现

  1. 新建index.html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>前端路由</title>
</head>
<body><!-- 导航 --><div id="nav"><a href="#/">首页</a><a href="#/blog">博客</a><a href="#/about">关于</a></div><!-- 内容展示 --><div id="routerView"></div>
</body>
</html>

GIF 2024-2-26 21-03-43.gif

  1. 我们来模拟配置一下每个url的内容
const routes = [{path: '/',component: '我是首页'},{path: '/blog',component: '我是博客页'},{path: '/about',component: '我是关于页'}
];
  1. 下面开始编写逻辑部分

通过onhashchange来监听url的变化，DOM有个location对象，它有一个hash属性，这个值就是我们a标签中的href的值

window.addEventListener('hashchange', loadPage);function loadPage () {console.log(location.hash);
}

GIF 2024-2-26 21-06-39.gif

  1. 通过routes和loadPage修改routerView的内容。
// 通过id获取div元素
const routerView = document.getElementById('routerView');const routes = [{path: '/',component: '我是首页'},{path: '/blog',component: '我是博客页'},{path: '/about',component: '我是关于页'}
];window.addEventListener('hashchange', loadPage);function loadPage() {// 1. 获取要跳转的路由 默认值是#/let hashVal = location.hash || '#/';// 2. 查找符合的路由routes.forEach(route => {if (`#${route.path}` === hashVal) {// 3. 元素显示相应内容routerView.innerHTML = route.component;}});
}
  1. 我们发现手动刷新的时候显示的内容异常，又变成了我是首页。所以我们需要当文档流加载完成后触发一次loadPage方法。
window.addEventListener('DOMContentLoaded', loadPage);

3.1.2 效果展示

GIF 2024-2-26 21-08-25.gif

3.1.3 小结

hash模式最主要的就是使用到onhashchange事件和url后带#。

3.2 History模式

histroy和hash不太一样，他就不能通过#字符了，那它是怎么让页面不刷新进行跳转的呢？

注意：hash和history唯一的区别就是一个有#，知识美观上有所影响，估计这个回答大家耳朵也都听的起茧子了。

3.2.1 概念

我查阅了一下MDN对history的解释：

History接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。

这里我们主要使用到pushState方法和popstate监听事件。

3.2.2 pushState和popstate

在 HTML 文档中，history.pushState() 方法向浏览器的会话历史栈增加了一个条目。该方法是异步的。为 popstate 事件增加监听器，以确定导航何时完成。state 参数将在其中可用。

官方说了一大堆，我看不懂，我就说一说的理解：就是浏览器有一个‘仓库’，它可以存储我们访问的路径，通过这个‘仓库’，我们可以正确的进行页面的前进和后退。通过监听popstate可以获取到url的变量值。

3.2.3 代码实现

  1. 还用刚才那个index.html，节省空间哈哈哈。
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>前端路由</title>
</head>
<body><!-- 导航 --><div id="nav"><a href="/">首页</a><a href="/blog">博客</a><a href="/about">关于</a></div><!-- 内容展示 --><div id="routerView">我是首页</div>
</body>
</html>

此时注意：我们a标签的href是正常的跳转地址，这样会有一个问题，a标签有默认事件，会进行跳转。我们先解决这个问题。

// 1. 获取a标签集合
const links = document.querySelectorAll('a');links.forEach(a => {a.addEventListener('click', (e) => {// 2. 阻止默认事件e.preventDefault();})
});
  1. pushState参数详解
pushState(state, unused)
pushState(state, unused, url)
  • state: state 对象是一个 JavaScript 对象，其与通过 pushState() 创建的新历史条目相关联。每当用户导航到新的 state，都会触发 popstate 事件，并且该事件的 state 属性包含历史条目 state 对象的副本。
  • unused: 由于历史原因，该参数存在且不能忽略；传递一个空字符串是安全的，以防将来对该方法进行更改。
  • url: 新历史条目的 URL。

请注意，浏览器不会在调用 pushState() 之后尝试加载该 URL，但是它可能会在以后尝试加载该 URL，例如，在用户重启浏览器之后。新 URL 可以不是绝对路径；如果它是相对的，它将相对于当前的 URL 进行解析。新的 URL 必须与当前 URL 同源；否则，pushState() 将抛出异常。如果该参数没有指定，则将其设置为当前文档的 URL。

以上都是MDN的官方解释

  1. 当我们点击a标签后我们需要把href的值通过pushstate存起来。
// 通过getAttribute方法获取a标签href的值
const url = a.getAttribute('href');
  1. push到浏览器‘仓库’中。
pushState(null, '', a.getAttribute('href'));
  1. 我们把上边的代码封装为一个函数
function load () {let url = location.pathnameroutes.forEach(route => {if (location.pathname === route.path) {routerView.innerHTML = route.component;}})  
}
  1. 当文档流加载完成后，初始化我们的a标签
window.addEventListener('DOMContentLoaded', load);
  1. 最后我们来监听popstate
const routes = [{path: '/',component: '我是首页'},{path: '/blog',component: '我是博客页'},{path: '/about',component: '我是关于页'}
];function render () {let url = location.pathnameroutes.forEach(route => {if (location.pathname === route.path) {routerView.innerHTML = route.component;}})
}window.addEventListener('popstate', render)

完整代码

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>前端路由</title>
</head>
<body><!-- 导航 --><div id="nav"><a href="/">首页</a><a href="/blog">博客</a><a href="/about">关于</a></div><!-- 内容展示 --><div id="routerView">我是首页</div><script>const routes = [{path: '/',component: '我是首页'},{path: '/blog',component: '我是博客页'},{path: '/about',component: '我是关于页'}];const routerView = document.getElementById('routerView');window.addEventListener('DOMContentLoaded', load);window.addEventListener('popstate', render);function load () {let url = location.pathnameroutes.forEach(route => {if (location.pathname === route.path) {routerView.innerHTML = route.component;}})  }function render () {let url = location.pathnameroutes.forEach(route => {if (location.pathname === route.path) {routerView.innerHTML = route.component;}})}</script>
</body>
</html>

3.2.4 小结

history模式大家也可以刷新一下，发现页面报错了（Cannot GET /blog），这个原因和Vue中使用history模式页面刷新报404是一个道理，等以后有时间坐下来和大家聊一聊。

四、总结

通过本章节小伙伴们是不是对前端路由有了一个更加清晰的认识与理解，想必大家再遇到此类面试题时一定可以迎刃而解，给面试官眼前一亮。

另外再来聊一聊我的 个人博客，目前还是起步阶段能还不完善。未来的规划也不太明确，如果小伙伴们有什么好的想法或创意可以私信或者留言。我会把好的想法融入到咱们的博客中。

相关文章：

探究前端路由hash和history的实现原理（包教包会）

今天我们来讲一讲前端中很重要的一个部分路由&#xff08;router&#xff09;&#xff0c;想必前端小伙伴对‘路由’一词都不会感到陌生。但是如果哪天面试官问你&#xff0c;能大概说一说前端路由的实现原理吗&#xff1f; 你又会如何应对呢&#xff1f; 今天勇宝就带着大家一…...

编程日记 2024/2/28 4:28:55

幻兽帕鲁服务器多少钱？有买过的吗？

幻兽帕鲁服务器多少钱&#xff1f;太卷了&#xff0c;降价到24元1个月&#xff0c;阿里云4核16G10M游戏服务器26元1个月、149元半年&#xff0c;腾讯云4核16G游戏服务器32元、312元一年&#xff0c;华为云26元&#xff0c;京东云主机也是26元起。云服务器吧yunfuwuqiba.com给大…...

编程日记 2024/2/28 4:27:54

MCU独立按键单控LED实现

##江科大视频学习&#xff0c;并且对具体的一些小细节进行更详细的分析。 什么是独立按键&#xff1f; 轻触按键:相当于是一种电子开关&#xff0c;按下开头接通&#xff0c;松开时开头断开&#xff0c;实现原理是通过轻触按键内部的金属弹片受力弹动来实现接通和断开。 注意…...

编程日记 2024/2/28 4:24:51

[数据集][目标检测]游泳者溺水数据集VOC+YOLO格式2类别895张

数据集制作单位&#xff1a;未来自主研究中心(FIRC) 数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;895 标注数量(xml文件个数)&#xff1a…...

编程日记 2024/2/28 4:21:48

2402C++,C++使用单链列表

原文 #include <windows.h> #include <malloc.h> #include <stdio.h>//用于列表项的结构;第一个成员是SLIST_ENTRY结构,其他成员是数据.在此,数据只是测试 typedef struct _PROGRAM_ITEM {SLIST_ENTRY ItemEntry;ULONG Signature; } PROGRAM_ITEM, *PPROGR…...

编程日记 2024/2/28 4:19:47

《Docker极简教程》--Docker服务管理和监控--Docker服务的监控

Docker监控的必要性在于确保容器化环境的稳定性、性能和安全性。以下是几个关键原因&#xff1a; 性能优化和故障排除&#xff1a;监控可以帮助识别容器化应用程序的性能问题&#xff0c;并快速进行故障排除。通过监控关键指标&#xff0c;如CPU利用率、内存使用、网络流量等&…...

编程日记 2024/2/28 4:14:43

C++初阶 | [八] (下) vector 模拟实现

摘要&#xff1a;vector 模拟实现讲解&#xff08;附代码示例&#xff09;&#xff0c;隐藏的浅拷贝&#xff0c;迭代器失效 在进行 vector 的模拟实现之前&#xff0c;我们先粗略浏览一下 stl_vector.h 文件中的源码来确定模拟实现的大体框架。 这里提供一些粗略浏览源码的技巧…...

编程日记 2024/2/28 4:10:39

信息安全计划

任何管理人员或人力资源专业人士都知道&#xff0c;除非彻底记录标准和实践&#xff0c;否则永远无法真正实施和执行标准和实践。正如您可能想象的那样&#xff0c;在保护您的网络、技术和数据系统免受网络威胁以及在发生这些事件时规划最及时、高效和有效的响应时&#xff0c;…...

编程日记 2024/2/28 4:01:29

【更新完毕】2024牛客寒假算法基础集训营6 题解 | JorbanS

文章目录 [A - 宇宙的终结](https://ac.nowcoder.com/acm/contest/67746/A)[B - 爱恨的纠葛](https://ac.nowcoder.com/acm/contest/67746/B)[C - 心绪的解剖](https://ac.nowcoder.com/acm/contest/67746/C)[D - 友谊的套路](https://ac.nowcoder.com/acm/contest/67746/D)[E …...

编程日记 2024/2/28 4:00:28

FL Studio All Plugins Edition2024中文完整版Win/Mac

FL Studio All Plugins Edition&#xff0c;常被誉为数字音频工作站&#xff08;DAW&#xff09;的佼佼者&#xff0c;是音乐制作人和声音工程师钟爱的工具。它集音频录制、编辑、混音以及MIDI制作为一体&#xff0c;为用户提供了从创作到最终作品输出的完整工作流程。这个版本…...

编程日记 2024/2/28 3:59:27

神经网络系列---归一化

文章目录 归一化批量归一化预测阶段 测试阶段γ和β&#xff08;注意&#xff09;举例 层归一化前向传播反向传播 归一化 批量归一化 &#xff08;Batch Normalization&#xff09;在训练过程中的数学公式可以概括如下&#xff1a; 给定一个小批量数据 B { x 1 , x 2 , … …...

编程日记 2024/2/28 3:58:26

2023 龙蜥操作系统大会演讲实录：《兼容龙蜥的云原生大模型数据计算系统——πDataCS》

本文主要分三部分内容&#xff1a;第一部分介绍拓数派公司&#xff0c;第二部分介绍 πDataCS 产品&#xff0c;最后介绍 πDataCS 与龙蜥在生态上的合作。 杭州拓数派科技发展有限公司&#xff08;简称“拓数派”&#xff0c;英文名称“OpenPie”&#xff09;是国内基础数据计…...

编程日记 2024/2/28 3:57:25

【Vue渗透】Vue站点渗透思路

原文地址 极核GetShell 前言 本文经验适用于前端用Webpack打包的Vue站点&#xff0c;阅读完本文&#xff0c;可以识别出Webpack打包的Vue站点&#xff0c;同时可以发现该Vue站点的路由。 成果而言&#xff1a;可能可以发现未授权访问。 识别Vue 识别出Webpack打包的Vue站…...

编程日记 2024/2/28 3:54:23

主数据管理是数字化转型成功的基石——江淮汽车案例分享

汽车行业数字化转型的背景 在新冠疫情导火索的影响下&#xff0c;经济全球化政治基础逐渐动摇。作为全球最大的汽车市场&#xff0c;我国的汽车市场逐渐由增量转为存量市场。 在数字化改革大背景下&#xff0c;随着工业4.0时代的到来&#xff0c;江淮汽车集团力争实现十四五数…...

编程日记 2024/2/28 3:47:17

【Spring连载】使用Spring Data访问 MongoDB（十一）----加密Encryption (CSFLE)

[TOC](【Spring连载】使用Spring Data访问 MongoDB&#xff08;十一&#xff09;----加密Encryption (CSFLE)) 一级目录 二级目录 三级目录...

编程日记 2024/2/28 3:45:15

【postgresql】数据表id自增与python sqlachemy结合实例

需求&#xff1a; postgresql实现一个建表语句&#xff0c;表名&#xff1a;student,字段id,name,age&#xff0c; 要求&#xff1a;每次添加一个数据id会自动增加1 在PostgreSQL中&#xff0c;您可以使用SERIAL或BIGSERIAL数据类型来自动生成主键ID。以下是一个创建名为stude…...

编程日记 2024/2/28 3:41:11

什么是索引？在 MySQL 中有哪些类型的索引？它们各自的优势和劣势是什么？

什么是索引&#xff1f;在 MySQL 中有哪些类型的索引&#xff1f;它们各自的优势和劣势是什么&#xff1f; 索引是数据库中用于帮助快速查询数据的一种数据结构。在 MySQL 中&#xff0c;索引可以显著提高查询性能&#xff0c;因为它允许数据库系统不必扫描整个表来找到相关数据…...

编程日记 2024/2/28 3:36:07

Docker安装与基础知识

目录 -----------------Docker 概述--------------------------- 容器化越来越受欢迎&#xff0c;因为容器是&#xff1a; Docker与虚拟机的区别&#xff1a; Docker核心概念&#xff1a; ●镜像 ●容器 ●仓库 -----------------安装 Docker--------------------------…...

编程日记 2024/2/28 3:29:01

搭建Facebook直播网络对IP有要求吗？

在当今数字化时代&#xff0c;Facebook直播已经成为了一种极具吸引力的社交形式&#xff0c;为个人和企业提供了与观众直接互动的机会&#xff0c;成为推广产品、分享经验、建立品牌形象的重要途径。然而&#xff0c;对于许多人来说&#xff0c;搭建一个稳定、高质量的Facebook…...

编程日记 2024/2/28 3:25:59

Qt开发：MAC安装qt、qtcreate(配置桌面应用开发环境)

安装qt-creator brew install qt-creator安装qt brew install qt查看qt安装路径 brew info qtzhbbindembp ~ % brew info qt > qt: stable 6.6.1 (bottled), HEAD Cross-platform application and UI framework https://www.qt.io/ /opt/homebrew/Cellar/qt/6…...

编程日记 2024/2/28 3:24:58

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

编程新知 2025/9/15 5:19:36

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/7/16 16:51:12

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

编程新知 2025/9/11 12:54:54

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2025/7/18 1:50:27

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

编程新知 2025/9/13 17:37:00

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/8/9 23:42:13

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2025/9/7 2:22:03

【VLNs篇】07：NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

编程新知 2025/9/14 8:49:01

Linux 内存管理实战精讲：核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

编程新知 2025/9/2 17:47:53

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/8/17 23:35:19