HTML路由是SPA前端路由的核心机制，依赖pushState/replaceState修改URL不刷新页面并配合popstate响应导航；pushState路径须为同源绝对路径；服务端需配置fallback返回入口HTML；popstate仅在浏览器后退/前进时触发，不包括pushState调用。
HTML 路由（即原生 history.pushState / replaceState 配合 popstate 事件）本身不是“兼容”或“不兼容”单页应用（SPA），它是 SPA 实现前端路由的核心机制——没有它，主流 SPA 框架根本跑不起来。
为什么 pushState 是 SPA 路由的基础设施
SPA 不刷新页面切换视图，靠的就是拦截地址栏变化、更新 DOM 而不触发服务端请求。原生 pushState 正是唯一能：
- 修改 URL（包括路径、查询参数）且不重载页面
- 把任意序列化状态（如
{page: "user", id: 123}）存入浏览器历史栈 - 配合
popstate事件响应后退/前进操作
框架如 React Router、Vue Router 底层都封装了这组 API。你手动调用 history.pushState({path: "/about"}, "", "/about")，再监听 popstate，就已经是一个最简 SPA 路由了。
pushState 的路径参数必须是同源绝对路径
这是最容易出错的地方：传入相对路径（如 "./about" 或 "about"）会直接报错 DOMException: Failed to execute 'pushState' on 'History'。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
history.pushState(null, "", "/about")或history.pushState(null, "", location.origin + "/about") - 错误写法：
history.pushState(null, "", "about")、history.pushState(null, "", "./about") - 注意：
pushState第三个参数是 URL 路径部分，不能含协议和域名（除非同源），也不能以?或#开头
服务端必须兜底返回入口 HTML
用户直接访问 /user/123 或刷新页面时，浏览器会向服务端发请求。如果服务端没配置，就返回 404 —— 这和前端路由无关，是部署必踩坑。
- Nginx 示例：
location / { try_files $uri $uri/ /index.html; } - Vercel/Netlify：默认开启 SPA fallback
- 开发服务器（如 Vite、Webpack Dev Server）：需显式开启
historyApiFallback: true
漏掉这步，本地开发一切正常，一上线就白屏或 404。
popstate 不会触发页面加载，但有触发条件
很多人以为只要 URL 变了就会触发 popstate，其实它只在「用户点击后退/前进按钮」或调用 history.back() 等导航 API 时触发，pushState 和 replaceState 自身不会触发它。
- 监听方式：
window.addEventListener("popstate", e => console.log(e.state)) -
e.state是之前pushState或replaceState传入的第一个参数（可为 null） - 注意：首次页面加载时，
popstate不会触发，哪怕 URL 带有 hash 或 query —— 如需初始化路由，得手动解析location.pathname
真正麻烦的不是 API 本身，而是边界情况：比如嵌套路由中状态丢失、滚动复位时机不对、SEO 渲染时机与 history 同步问题——这些都不是 pushState 能解决的，得靠框架或自己补全逻辑。
