话说回来，

从多页到 SPA：用 50 行代码理解前端路由的本质

前言

在学习 React Router、Vue Router 时往往会被一大堆 API 绑住：

• useNavigate
• router.push
• beforeEach

但当有人问你的观点是。“前端路由为什么能做到“URL 变了但页面没整页刷新”？”很多人就会卡壳，

这篇文章不讨论框架源码，而是用一个简短的 HashRouter 来彻底理清前端路由的本质。

一、先别急着讲框架，先看普通链接

传统页面跳转通常是这样：

点击后浏览器大致经历以下流程：

1. 读取当前链接里的 URL。
2. 通过 HTTP/HTTPS 向服务器发起请求。
3. 服务器返回新的 text/html。按理说，
4. 浏览器重新解析 HTML、建立 DOM、渲染页面。
5. 正常导航时浏览器会往历史记录里插入一条记录。

一个容易混淆的点：不是 navigator。而是 history

• location: 当前地址信息
• history: 浏览历史记录
• navigator: 浏览器和设备环境信息

二、传统多页应用，问题到底出在哪？

每一次点击都要完整请求一个新的 HTML 页面这导致：

• 页面切换时出现白屏或闪烁；
公共资源重复加载，浪费带宽；移动端体验不如原生 App 顺滑。

#三、SPA 的主要思路：只换内容。不换整页

Spa 的主要是：整个站点只先加载一次主页面后续切换“页面”时只更新容器内内容，而不是让浏览器整页刷新。说起来，

从主要问题来看。如果不请求完整页面URL 怎么变？

URL 必须变以满足地址栏可读、前进后退可用还有分享功能，但又不能触发整页刷新。

#四、突破口就在 URL 的 hash 部分

https这方面，//www.example.com/user/?按理说，a=&b=#profile

#profile 是 hash 部分。它最初用于锚点跳转：

这里是底部

hash 最关键的特性：改变它不会重新向服务器请求整个页面。