History API 浏览器历史

History API：pushState/replaceState修改URL不刷新（SPA路由基础）、popstate事件监听前进后退、state对象传递、history.back/forward/go、与hash路由对比（#hash vs /path） · 难度：入门 · +10XP

History API —— 无刷新改变URL

单页应用（SPA）的核心技术之一：用pushState改变URL但不刷新页面，用popstate监听浏览器的前进后退。

基本用法

// 改变URL + 添加历史记录
history.pushState({ page: 1 }, 'Page 1', '/page-1');
// 替换当前历史记录（不新增）
history.replaceState({ page: 2 }, 'Page 2', '/page-2');
// 监听后退/前进
window.addEventListener('popstate', event => {
  console.log('回到了：', event.state);
});
// 前进/后退/跳转
history.back();
history.forward();
history.go(-2);

动手练习

1. 基础练习：做一个Tab切换——点击Tab改变URL hash，刷新后保持选中状态。
2. 进阶应用：实现一个简单的SPA路由——根据URL渲染不同内容。
3. 项目实战：在分页组件中用History API让分页状态可通过浏览器前进后退还原。