History API 文档
history.pushState()
向浏览器历史记录栈添加一条记录，同时更新URL但不刷新页面。
history.pushState(state, title, url);
- state: 与历史记录关联的状态对象
- title: 当前大多数浏览器忽略此参数
- url: 新的历史记录条目的URL
history.replaceState()
修改当前历史记录条目，而不是创建新条目。
history.replaceState(state, title, url);
常用于初始化当前历史记录状态。
popstate 事件
当用户导航历史记录时触发（例如点击后退/前进按钮）。
window.addEventListener('popstate', (event) => {
// 处理历史记录导航
renderView(window.location.pathname);
});
通过 event.state 可以访问关联的状态对象。
关键概念
- 单页应用（SPA）在初始加载后不会重新加载整个页面
- 通过History API改变URL而不触发页面刷新
- 提供与多页应用相同的导航体验（前进/后退按钮）
- 允许为每个"页面"创建书签或分享链接
- 比传统的hash路由更清晰（URL中没有#）