目录

一、什么是单页面路由

二、浏览器支持单页面路由的核心能力

1. Hash 路由

2. History 路由

三、为什么改 URL 却不用刷新页面

history.pushState()

四、Hash 模式为什么也能实现路由

五、History 路由为什么更像真正的网址

六、单页面路由真正成立，还因为浏览器允许 JS 操作 DOM

1. JS 能感知路由变化

2. JS 能动态更新页面内容

七、单页面路由和传统路由的区别

传统多页面应用

单页面应用

八、为什么说“浏览器支持”而不是“框架支持”

九、面试标准回答

十、补充：History 模式为什么需要后端配合

十一、一句话总结

---

本质原因是：

浏览器提供了 History API 和 URL hash 机制，允许前端在不重新加载整个页面的情况下改变 URL，并监听 URL 变化，从而实现单页面路由。

---

一、什么是单页面路由

单页面应用（SPA）里，页面看起来在切换：

• /home
• /about
• /detail

但实际上：

• HTML 页面通常只加载一次
• 后续只是前端根据不同 URL
• 动态替换页面内容

也就是说：

变的是视图，不是整个页面重新请求。

---

二、浏览器支持单页面路由的核心能力

浏览器之所以能支持 SPA 路由，主要靠两类机制：

1. Hash 路由

利用 URL 中的 #

例如：

http://example.com/#/home
http://example.com/#/about

# 后面的内容变化时：

• 浏览器不会重新发起页面请求
• 前端可以监听 hashchange 事件
• 然后根据不同 hash 渲染不同组件

---

2. History 路由

利用 HTML5 提供的 History API：

• history.pushState()
• history.replaceState()
• window.onpopstate

例如：

history.pushState({}, '', '/home');

这会修改地址栏 URL，但：

• 不会刷新页面
• 前端可以根据当前路径渲染对应页面

---

三、为什么改 URL 却不用刷新页面

传统情况下，浏览器地址变化会请求新页面，因为：

• 浏览器默认认为 URL 对应一个新资源

但是 SPA 不一样。

浏览器后来提供了专门的 API，让 JS 可以主动告诉浏览器：

“我只是改一下地址记录，你不要重新加载页面。”

这就是：

history.pushState()

history.pushState(state, title, url);

它的作用：

• 修改地址栏
• 添加历史记录
• 不刷新页面

所以前端就能自己接管“路径变化 -> 页面渲染”这个过程。

---

四、Hash 模式为什么也能实现路由

因为 URL 中 # 后面的内容叫 hash / 锚点。

比如：

http://example.com/#/user

浏览器在请求服务器时，不会把 hash 部分发送给服务器。

也就是说：

• 实际请求的还是 http://example.com/
• 只是在前端页面里，JS 能读到 #/user
• 再根据这个值切换视图

并且浏览器提供了事件：

window.addEventListener('hashchange', () => {
  console.log(location.hash);
});

这样 hash 一变，前端就知道该切换页面了。

---

五、History 路由为什么更像真正的网址

因为它路径上没有 #：

/home
/about
/profile

看起来就是正常 URL，更美观。

它依赖的是浏览器 History API：

history.pushState({}, '', '/about');

同时浏览器支持前进后退监听：

window.addEventListener('popstate', () => {
  console.log(location.pathname);
});

这样前端就能：

• 点击链接时改 URL
• 点击前进后退时同步更新页面

---

六、单页面路由真正成立，还因为浏览器允许 JS 操作 DOM

除了 URL 变化能力，还需要：

1. JS 能感知路由变化

• hashchange
• popstate

2. JS 能动态更新页面内容

• 操作 DOM
• 框架进行组件渲染

所以完整原因其实是：

浏览器既提供了修改 URL 而不刷新的能力，也提供了监听 URL 变化的能力，再加上 JS 可以动态更新页面内容，于是单页面路由就能实现。

---

七、单页面路由和传统路由的区别

传统多页面应用

• 每次切换路由
• 浏览器都向服务器请求新的 HTML
• 页面整页刷新

单页面应用

• 首次加载一个 HTML
• 后续切换路由不重新请求整页
• 只更新局部视图

---

八、为什么说“浏览器支持”而不是“框架支持”

Vue Router、React Router 这些框架本身不是创造了路由能力，而是：

封装了浏览器原生的 hash 和 history 能力。

也就是说，浏览器底层已经支持：

• URL 变化不刷新
• 路由变化监听
• 历史记录管理

前端框架只是帮你做好了：

• 路径和组件映射
• 路由守卫
• 嵌套路由
• 懒加载等功能

---

九、面试标准回答

你可以这样答：

浏览器之所以支持单页面路由，是因为它提供了两种关键能力：
第一是 URL 变化但不刷新页面，比如 hash 和 HTML5 的 history.pushState/replaceState；
第二是 可以监听 URL 变化，比如 hashchange 和 popstate。
前端拿到路由变化后，再通过 JavaScript 动态更新页面内容，所以就能实现单页面应用中的路由切换。
本质上，单页面路由并不是浏览器自动帮你切页面，而是浏览器提供了基础能力，前端框架在此基础上完成视图切换。

---

十、补充：History 模式为什么需要后端配合

这是常见追问。

比如访问：

http://example.com/user

如果你直接刷新页面：

• 浏览器会真的请求服务器的 /user
• 如果服务器没有这个路由
• 就会返回 404

所以 History 路由需要后端支持：

无论访问什么前端路由，都返回同一个 index.html

然后由前端接管路由解析。

---

十一、一句话总结

浏览器支持单页面路由，是因为它提供了修改 URL 不刷新页面、监听 URL 变化、管理历史记录以及动态更新 DOM 的能力。