如何用 window.history.pushState 实现单页应用中 URL 地址的平滑变更-js教程-PHP中文网

window.history.pushstate 可在不刷新页面下更新 url 并保存状态，是 spa 路由核心；需配合 popstate 事件响应导航，并服务端 fallback + 前端初始化处理直接访问。

如何用 window.history.pushstate 实现单页应用中 url 地址的平滑变更

使用 window.history.pushState 可以在不刷新页面的前提下更新浏览器地址栏 URL，同时保留当前页面状态，是构建单页应用（SPA）路由的核心手段之一。关键在于它只改 URL 和历史记录，不触发页面跳转或重新加载。

pushState 的基本用法和参数含义

pushState 接收三个参数：state 对象、标题（通常忽略）、新的 URL 路径。实际中标题参数基本不生效（多数浏览器会忽略），重点是 state 和 URL：

state：一个可被序列化的 JavaScript 对象，会在后续的 popstate 事件中还原，用于保存路由相关数据（如页面类型、ID、搜索参数等）
URL：相对路径（如 /user/123）或绝对路径（需同源），不能跨域；浏览器地址栏会更新，但不会发起请求

示例：

window.history.pushState({ page: 'user', id: 123 }, '', '/user/123');

配合 popstate 实现前进后退的响应

仅调用 pushState 不够——用户点击浏览器“后退”按钮时，页面不会自动切换内容。必须监听 popstate 事件，并根据 event.state 渲染对应视图：

Text Mark

一款面向文本内容处理的AI助手，可辅助用户整理、改写和分析文字信息，适用于日常写作和文本编辑等任务。

下载

该事件在用户点击前进/后退、或通过 history.back()/history.forward() 触发时触发
event.state 就是之前传入 pushState 的那个对象，可用于判断目标页面
注意：初始页面加载（非导航触发）不会触发 popstate，首次进入需手动初始化视图

常见写法：

window.addEventListener('popstate', (e) => {
if (e.state?.page === 'user') renderUserPage(e.state.id);
else if (e.state?.page === 'home') renderHomePage();
});

处理直接访问 URL 或刷新页面的情况

pushState 不影响服务端，所以用户直接输入 /user/123 或刷新页面时，浏览器会向服务器发起真实请求。为避免 404，需做两件事：

服务端配置 fallback：将所有前端路由路径（如 /user/*）都返回主 HTML 文件（如 index.html），让前端 JS 接管渲染
前端启动时读取当前 URL：在 JS 初始化阶段解析 location.pathname，主动调用渲染逻辑（不要依赖 popstate）

例如，在入口脚本中：

const path = location.pathname;
if (path.startsWith('/user/')) {
const id = path.split('/')[2];
renderUserPage(id);
}