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

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

news 2025/11/12 22:45:39

今天我们来讲一讲前端中很重要的一个部分路由（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 代码实现

新建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

我们来模拟配置一下每个url的内容

const routes = [{path: '/',component: '我是首页'},{path: '/blog',component: '我是博客页'},{path: '/about',component: '我是关于页'}
];

下面开始编写逻辑部分

通过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

通过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;}});
}

我们发现手动刷新的时候显示的内容异常，又变成了我是首页。所以我们需要当文档流加载完成后触发一次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 代码实现

还用刚才那个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();})
});

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的官方解释

当我们点击a标签后我们需要把href的值通过pushstate存起来。

// 通过getAttribute方法获取a标签href的值
const url = a.getAttribute('href');

push到浏览器‘仓库’中。

pushState(null, '', a.getAttribute('href'));

我们把上边的代码封装为一个函数

function load () {let url = location.pathnameroutes.forEach(route => {if (location.pathname === route.path) {routerView.innerHTML = route.component;}})  
}

当文档流加载完成后，初始化我们的a标签

window.addEventListener('DOMContentLoaded', load);

最后我们来监听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的实现原理（包教包会）

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

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

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

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

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

MCU独立按键单控LED实现

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

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

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

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

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

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

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

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

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

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

信息安全计划

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

编程日记 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，常被誉为数字音频工作站（DAW）的佼佼者，是音乐制作人和声音工程师钟爱的工具。它集音频录制、编辑、混音以及MIDI制作为一体，为用户提供了从创作到最终作品输出的完整工作流程。这个版本…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Docker安装与基础知识

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

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

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

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

C++：std::is_convertible

C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

编程新知 2025/6/11 15:23:57

【JVM】- 内存结构

引言 JVM：Java Virtual Machine 定义：Java虚拟机，Java二进制字节码的运行环境好处： 一次编写，到处运行自动内存管理，垃圾回收的功能数组下标越界检查（会抛异常，不会覆盖到其他代码…...

编程新知 2025/11/12 19:49:40

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时，可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案： 1. 检查电源供电问题问题原因：多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/10/28 15:02:57

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹，并新增内容 3.创建package文件夹...

编程新知 2025/11/8 3:51:02

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置，使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2025/11/10 0:12:43

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting）冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2025/10/29 18:00:42

【HTTP三个基础问题】

面试官您好！HTTP是超文本传输协议，是互联网上客户端和服务器之间传输超文本数据（比如文字、图片、音频、视频等）的核心协议，当前互联网应用最广泛的版本是HTTP1.1，它基于经典的C/S模型，也就是客…...

编程新知 2025/9/27 18:25:59

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状：装配工作依赖人工经验，装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书，但在实际执行中，工人对指导书的理解和遵循程度参差不齐。船舶装配过程中的挑战与需求挑战 (1…...

编程新知 2025/11/12 11:29:40

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

编程新知 2025/11/12 18:49:45

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample（样本数） 表示测试中发送的请求数量，即测试执行了多少次请求。单位，以个或者次数表示。示例：…...

编程新知 2025/9/22 12:41:30