前端Wiki/词条/History 路由 API

History 路由 API

定义通过 history.pushState 与 popstate 事件实现无刷新的前端路由切换

单页应用切换页面而不整页刷新，靠的就是 History API。pushState(状态对象, 标题, 路径) 会向历史记录压入一条新地址，地址栏变化但页面不重载；replaceState 则是替换当前记录。监听 popstate 事件可以感知用户点击后退/前进，在回调里渲染对应组件即可完成前端路由。

history 模式的路由地址是 /about 这样的真实路径，服务器必须配置回退到 index.html，否则刷新就 404。hash 模式（# 号路由）不需要服务器配合但地址不够美观。框架的路由库（Vue Router、React Router）底层就是包装了这套 API 并帮你处理参数与嵌套。

pushState 改地址不刷新，配合 popstate 实现前端路由
history 模式刷新需要服务器把任意路径回退到 index.html
pushState 的状态对象会被序列化，刷新后 state 仍可读取

JavaScript

// 伪代码：最简前端路由
function go(path) {
  history.pushState({ path: path }, '', path);
  render(path);
}
window.addEventListener('popstate', function (e) {
  render(location.pathname);
});
function render(path) {
  console.log('当前路由:', path);
}
// 点击导航调 go('/about')，点浏览器后退会触发 popstate 重渲染

⚠ 常见误区

pushState 后不监听 popstate，点后退地址变了页面不变
history 模式上线不配服务器回退，一刷新就 404
试图 pushState 跨域地址，浏览器会直接抛安全异常

🔗 相关词条浏览器渐进增强