单页应用（SPA）通过动态更新页面内容，避免整页刷新，提升用户体验。HTML5 的 History API 是实现前端路由管理的核心技术之一，它允许开发者在不重新加载页面的情况下操作浏览器历史记录，从而实现 URL 变化与视图切换的同步。
理解 History API 的基本方法
History API 提供了几个关键方法来控制浏览器的历史栈：
- history.pushState()：向历史记录添加一条新状态，同时改变 URL，但不会触发页面刷新。
- history.replaceState()：替换当前历史记录中的状态，URL 更新但不新增历史条目。
- window.onpopstate：当用户点击浏览器“前进”或“后退”按钮时触发，用于响应历史记录的变化。
这些方法配合使用，可以实现基于 URL 的视图切换逻辑。
使用 pushState 实现路由跳转
在 SPA 中，点击导航链接时不希望刷新页面，而是加载对应内容。可以通过拦截链接点击事件并调用 pushState 来实现。
立即学习“前端免费学习笔记（深入）”；
// 示例：绑定导航链接
document.querySelectorAll('a[data-link]').forEach(link => {
link.addEventListener('click', e => {
e.preventDefault();
const url = link.getAttribute('href');
navigate(url);
});
});
function navigate(url) {
// 根据 URL 加载对应内容
loadPage(url);
// 更新地址栏并添加历史记录
history.pushState({ path: url }, '', url);
}
这样 URL 会正常变化，且用户可使用浏览器导航功能。
监听浏览器前进/后退操作
当用户点击浏览器的“后退”按钮时，URL 改变但页面不会自动响应。需要监听 popstate 事件来处理。
window.addEventListener('popstate', e => {
const url = e.state?.path || window.location.pathname;
loadPage(url);
});
注意：只有通过 pushState 或 replaceState 添加的记录才会携带 state 数据，直接访问或刷新时 state 为 null，需结合当前 URL 处理。
实现简单的路由加载逻辑
可以根据 URL 映射不同的页面内容或模板。
async function loadPage(url) {
const contentDiv = document.getElementById('app');
try {
const response = await fetch(`/pages${url}.html`);
if (response.ok) {
contentDiv.innerHTML = await response.text();
} else {
contentDiv.innerHTML = '页面未找到
';
}
} catch (err) {
contentDiv.innerHTML = '网络错误
';
}
}
该函数动态加载对应路径的 HTML 片段并插入容器，实现无刷新内容切换。
基本上就这些。利用 History API，你可以构建出体验接近原生应用的单页应用路由系统，关键在于统一管理 URL 变化与视图更新的同步逻辑。不复杂但容易忽略的是对直接访问和刷新场景的处理，建议服务端配置 fallback 路由返回主页面，确保 SPA 正常启动。
