在现代网页开发中，单页应用（SPA）越来越普遍。为了在不刷新页面的情况下更新URL并保持浏览器历史记录的正常运作，html5 提供了 history API，其中 pushState 和 popState 是核心功能。合理使用它们可以显著改善用户体验，比如实现无刷新跳转、前进后退流畅切换内容。
pushState：添加新历史记录而不刷新页面
使用 history.pushState() 可以在不重新加载页面的前提下，将新的状态加入浏览器的历史栈，并更新当前 URL。
该方法接受三个参数：
- state：一个对象，用于描述新状态的信息（可为空）
- title：新页面的标题（目前大多数浏览器忽略这个值）
- url：想要显示在地址栏的新 URL（必须同源）
示例：
history.pushState( { page: 'home' }, '', '/home' );
执行后，浏览器地址栏会变成 /home，但页面不会刷新。用户也可以点击后退按钮返回上一页。
立即学习“前端免费学习笔记（深入）”；
popState 事件：监听浏览器前进后退操作
当用户点击“前进”或“后退”按钮时，浏览器会触发 popstate 事件。你可以通过监听它来动态更新页面内容。
示例：
window.addEventListener('popstate', function(event) { if (event.state) { console.log('当前状态:', event.state); // 根据 state 更新页面内容 loadContent(event.state.page); } else { console.log('无状态信息'); // 显示默认内容 } }); function loadContent(page) { // 模拟异步加载内容 document.getElementById('content').innerHTML = `正在加载 ${page} 页面`; }
这样，无论用户如何在历史记录中导航，页面都能响应式地展示对应内容，无需刷新。
结合使用提升用户体验
在实际项目中，通常结合 ajax 和 History API 实现无缝浏览体验。
例如用户点击导航链接：
document.querySelectorAll('a.nav-link').forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); const url = this.getAttribute('href'); const page = this.dataset.page; // 使用 AJAX 加载内容 fetch(`/api${url}`) .then(response => response.text()) .then(html => { document.getElementById('content').innerHTML = html; // 更新历史记录 history.pushState({ page, url }, '', url); }); }); });
配合 popstate 监听，用户在使用浏览器前进后退时，也能看到之前浏览的内容，整个过程平滑自然。
基本上就这些。只要注意 URL 同源限制，并妥善管理 state 状态，History API 能让单页应用更接近原生应用的体验。不复杂但容易忽略的是：记得在页面初始化时也处理当前路径，避免直接访问子路由时 state 为空导致内容缺失。