从页面跳转到前端路由：手写一个简单的 HashRouter

当我们在浏览器地址栏输入一个 URL 并访问页面时浏览器会向目标服务器发起请求。服务器返回 HTML，浏览器再解析并渲染页面。就在这个时候这次访问也会成为浏览历史中的一条记录。

使用者痛点：如果项目中有多个页面每一次点击链接都会导致整个页面重新加载。网络不佳时出现白屏、闪烁，严重影响使用者体验。其实，

如果一个网站有“首页”和“关于我们”两个页面最直接的实现方式是分别创建两个 HTML 文件。再使用链接完成页面之间的跳转。这种方式简单直观，但每次跳转都会重新加载并渲染整个页面。对于希望获得更连贯体验的应用我们真正想改变的往往只是页面中的一部分内容，而不是把整个页面重新加载一遍。不过，

单页应用正是从这个需求出发：页面的公共结构保持不变。JavaScript 根据当前 URL 动态替换内容区域。要理解这种工作方式，需要先弄清楚传统页面跳转、URL、hash 和 DOM 之间的关系。

一、传统多页面应用如何跳转

痛点示例：在传统多页项目里你必须为每个子模块维护独立的 HTML、CSS、JS 文件。一旦修改公共头部，需要同步更新所有文件，维护成本高。

下面是一个简化的首页：

“关于我们”页面拥有相同的页头和页脚，主要区别只是主体内容：

点击“关于我们”链接后浏览器访问 about.html。其实，即使两个页面的公共结构几乎完全一样。浏览器仍然会加载一个新的 HTML 页面并重新渲染。

这个过程体现了一种直接的资源对应关系：

index.html → 首页
about.html → 关于我们

多页面应用的优点是关系清晰，但问题也很明显：只改变主体内容时公共区域也跟着重新加载。在网络状况不理想时页面切换还可能出现短暂空白，破坏连续的操作体验。

二、单页应用要解决什么问题

痛点聚焦：开发者希望在同一个 HTML 框架内切换不同视图。以免重复请求公共资源，同时保留浏览器前进/后退等历史功能。

If 不再为每一块内容准备一个完整 HTML 页面那么怎样在同一个网页里显示不同内容？答案是 DOM 编程，

DOM 可以理解为浏览器根据 HTML 创建的对象结构。 JavaScript 可以找到其中的节点，并修改节点的内容。例如先在页面中准备一个内容容器：

再通过 JavaScript 找到它：

const container = document.getElementById;

接下来只要修改这个容器，就可以切换页面的主体内容：

container.innerHTML = "页面一";

此时页头、导航等公共结构都没有变化，仅 #container 内部被替换。SPA 的基本思路也就出现了：

URL 发生变化
↓ JavaScript 判断当前 URL
↓ 选择对应的内容
↓ 将内容渲染到 #container

关键难点：既然没有真正跳转，URL 应该如何跟着内容一起变化？如果 URL 不变，则无法形成“地址 ↔ 内容”的映射。Hash 正好提供了这一能力。

三、先认识 URL 的组成

痛点提醒：很多新人误以为只有方法才可以做路由，其实 hash 一样能参与路由且兼容性更好。

protocol://host/pathname?queryString#hash

• protocol: 如 http、https；
• host: 域名或 IP；
• pathname: 方法部分；
• ?queryString: 查询参数；说起来，
• #hash**:** 浏览器内部标识。可自行定义，

location.hash 获取当前地址的 hash。例如地址是

console.log;// "#/page1"

再看#`，

const hash = location.hash.slice;话说回来，console.log;// "page1"

四、hash 最初可以用来做什么

Pain point:If you rely on page reloads for navigation,every click triggers a full HTTP request。which is wasteful for SPAs.

#bottom/#top,浏览器自动滚动到对应位置。这种 “hash 改变 → 页面局部定位” 的机制，为前端路由提供了监听入口。

window.addEventListener{
console.log;console.log，console.log;})，其实，

• `event.oldURL`：改变前的完整 URL。

#/page1 → 页面一
#/page2 → 页面二
#/page3 → 页面三
...

五、搭建 SPA 的骨架结构

---