pushState能改变URL且不刷新页面，但需手动监听popstate事件、解析URL、更新视图，并配置服务端fallback以防404。
pushState 会改变 URL 但不触发页面重载，前提是手动处理路由和内容更新
直接调用 history.pushState() 不会让浏览器加载新 HTML，它只是修改地址栏、添加历史记录条目。你必须自己监听 popstate 事件、解析新 URL、拉取/渲染对应内容——否则后退/前进按钮点下去就卡住或跳转到 404。
常见错误现象：pushState 调用成功，URL 变了，但页面没反应；刷新页面直接 404（服务端没配置 fallback）；点击后退，URL 回退了，但视图没更新。
- 必须配合
window.addEventListener('popstate', handler)监听浏览器前进/后退 -
pushState(state, title, url)的url必须是同源的相对路径（如/user/123），不能是完整 URL 或跨域地址 -
title参数目前所有主流浏览器都忽略，传空字符串或null即可 - 首次进入页面时，
popstate不会触发，需在初始化时手动读取location.pathname并渲染对应内容
如何安全地触发 pushState 并避免重复 history 记录
用户点击链接时，不能直接让 <a href="/post/42"> 自然跳转，得阻止默认行为，再调用 pushState。否则一次点击既触发跳转又调用 pushState，会留下两条历史记录，后退两次才回到上一页。
使用场景：单页应用中导航菜单、分页按钮、标签切换等需要 URL 同步但不整页刷新的操作。
立即学习“前端免费学习笔记（深入）”；
- 给链接加
data-navigate="true"或统一 class（如.js-nav），避免对所有<a>拦截（比如外部链接、下载链接） - 在 click 事件中调用
event.preventDefault()，再执行history.pushState({path: '/post/42'}, '', '/post/42') - 不要在
pushState后立即调用渲染逻辑——应统一收口到popstate处理函数中，保证前进/后退/点击三者行为一致 - 如果要支持滚动复位（如回到页面顶部），可在
pushState后手动调用window.scrollTo(0, 0)，但注意 SSR 或初始加载时不应重复执行
服务端必须配置 fallback，否则刷新页面就 404
前端路由靠 JS 控制，但用户刷新时浏览器会向服务端发起真实请求。如果你的路由是 /dashboard/settings，而服务端没有这个路径的 HTML 返回，就会返回 404。这不是前端能解决的问题。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
关键不是“怎么写 JS”，而是“服务端怎么配”。不同环境处理方式不同：
- Vite / Webpack Dev Server：启用
historyApiFallback: true（默认已开） - Nginx：在 location 块中加
try_files $uri $uri/ /index.html; - Apache：启用
mod_rewrite，添加RewriteRule ^(.*)$ /index.html [QSA,L] - Node.js（Express）：在静态资源中间件之后加
app.get('*', (req, res) => res.sendFile(indexHtml))
漏掉这步，本地开发可能正常，一上线就崩——这是最常被忽略的部署环节。
state 对象有大小限制且不跨页面持久化
pushState 的第一个参数 state 是一个可选对象，用于存储与该 URL 关联的状态数据，会在 popstate 事件中通过 event.state 返回。但它不是 localStorage，也不是永久保存的。
性能与兼容性影响：
- Chrome 和 Firefox 对
state对象大小限制约 640KB，超出会抛DataCloneError - 该对象只存在于当前 tab 的 history 栈中，关掉 tab 就丢；跨 tab 或重启浏览器后也不恢复
- 不要存 DOM 节点、函数、Promise 等无法序列化的值——
pushState内部会调用 structured clone，遇到不可克隆值直接报错 - 推荐只存轻量标识，如
{page: 'user', id: '123'}，真实数据由后续 API 请求获取
真正难的不是调用 pushState，而是把路由解析、异步加载、状态同步、服务端 fallback、SEO 支持这些点串成一条不掉链子的线。少一个环节，用户就会在某个操作里突然跳出你的 SPA。
