pushstate 不能直接替换 url 而不刷新页面，因为它仅操作历史栈，不触发跳转或重载；需手动监听 popstate 并渲染视图，否则后退/前进时页面不更新。
pushState 为什么不能直接替换 URL 而不刷新页面
因为 pushState 本身只是操作浏览器历史栈，它不会触发页面跳转或重新加载——这是它和 window.location.href = 'xxx' 的根本区别。但这也意味着：你得自己监听 URL 变化、自己渲染对应内容，否则用户看到的还是旧页面。
常见错误是只调用 pushState，却不绑定 popstate 事件，导致点击浏览器后退/前进按钮时页面卡在原地，URL 变了但视图没更新。
- 必须用
window.addEventListener('popstate', handler)捕获导航动作（包括后退、前进、history.go()） -
pushState第一个参数（state）建议传入可序列化的对象，比如{ path: '/user/123' }，后续在popstate里能直接读取，避免再解析location.pathname - 不要在
pushState后手动修改document.title或 DOM；统一在popstate处理函数里做，保证前进/后退行为一致
如何让 a 标签点击不刷新但触 history 跳转
默认的 <a href="/about"></a> 点击会整页刷新。要拦截它，得阻止默认行为，并手动调用 pushState + 渲染。
关键不是“怎么写 a 标签”，而是“怎么统一拦截所有符合规则的链接”。推荐用事件委托，避免每个链接都加 onclick：
document.body.addEventListener('click', (e) => {
const link = e.target.closest('a[href]');
if (!link || link.hostname !== location.hostname) return;
e.preventDefault();
const url = new URL(link.href);
history.pushState({ path: url.pathname }, '', url.pathname);
renderRoute(url.pathname); // 你自己实现的路由渲染函数
});
- 用
e.target.closest('a[href]')安全捕获嵌套在按钮或 span 里的链接 - 检查
link.hostname !== location.hostname排除非本站链接（如外部网址、mailto:、#hash） - 别用
link.getAttribute('href')直接拼接，要用new URL(link.href)解析，它自动处理相对路径和 base 标签影响
popstate 事件为什么不触发首次访问页面
popstate 只在历史记录变化时触发（比如后退、前进、go()），**不会在页面首次加载时触发**。所以如果你靠它驱动首屏渲染，就会白屏。
正确做法是：首次加载时主动读取 location.pathname，执行一次路由匹配；之后所有导航都交由 popstate 驱动。
- 把路由逻辑封装成一个函数，比如
handleRoute(path)，首次和popstate都调它 - 不要在
popstate里判断event.state === null来区分首次加载——不可靠，某些浏览器会在初始页面也附带 state - 如果用了
replaceState初始化状态（比如修正 URL 中的多余参数），记得也在初始化时调一次handleRoute
History API 和服务端 404 的关系怎么处理
前端路由只管浏览器内跳转，但用户直接访问 https://site.com/user/123 或刷新页面时，请求会打到服务端。如果服务端没配置，就返回 404。
这不是前端能解决的问题，但你得知道怎么配合后端或静态托管平台：
- 开发时用支持 history fallback 的本地服务器，比如 Vite 默认开启，Webpack Dev Server 需配
historyApiFallback: true - 部署到 Nginx 时，所有非静态资源请求都要 fallback 到
index.html：try_files $uri $uri/ /index.html; - GitHub Pages 不支持服务端配置，只能改用
hash模式（#/user/123）；Vercel/Netlify 则可通过_redirects文件或配置实现 fallback
最容易被忽略的是：开发环境一切正常，上线后刷新 404，问题往往不在 JS 代码，而在托管配置漏了一行 try_files。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
