History API通过pushState和replaceState修改URL并管理页面状态，结合popstate事件响应前进后退，实现SPA无刷新路由切换；相比hash模式，其URL更简洁、利于SEO，但需服务端配置支持，避免404错误。
前端路由中的 History API 实现，核心在于利用浏览器原生的 History 接口来管理页面状态和 URL 变化，而无需向服务器发起完整请求。它让单页应用（SPA）在不刷新页面的前提下实现视图切换和浏览器前进后退功能。
History API 基本组成
History API 提供了几个关键方法和属性：
- history.pushState()：向历史记录添加一条新记录，并更新 URL
- history.replaceState()：替换当前历史记录条目，不新增记录
- popstate 事件：当用户点击前进/后退按钮时触发
这些方法允许 JavaScript 动态修改地址栏路径，同时保留浏览器的历史导航能力。
pushState 如何工作
调用 pushState(state, title, url) 时：
立即学习“前端免费学习笔记（深入）”；
- state：一个对象，用于存储该状态的相关数据，会被序列化保存
- title：目前多数浏览器忽略此参数，可传空字符串
- url：新的 URL，必须同源，不会触发页面加载
例如：history.pushState({page: 'home'}, '', '/home') 会将地址变为 /home，但页面不刷新，开发者可借此渲染对应组件。
监听浏览器导航行为
仅靠 pushState 不足以支撑完整路由，还需响应用户的前进后退操作：
- 绑定 window.addEventListener('popstate', callback)
- 每次用户点击前进/后退，popstate 事件被触发，携带 state 对象
- 在事件回调中解析当前路径，重新渲染对应视图
这样就实现了双向控制：既能通过 JS 跳转，也能响应浏览器自带的导航动作。
与 hash 模式的对比优势
相比传统的 hash 路由（如 #/user），History 模式有明显优点：
- URL 更干净，形如 /user，更符合常规网站路径格式
- 不需要监听 hashchange 事件，统一使用 popstate
- 对 SEO 更友好（配合服务端渲染效果更佳）
但需要服务端配合：所有客户端路由路径都应返回同一个 HTML 入口文件，避免 404 错误。
基本上就这些。History API 让前端完全掌控路由跳转，是现代 SPA 路由实现的基础机制。不复杂但容易忽略细节，比如 state 的大小限制或跨页面状态传递问题。
