直接调用history.pushState()仅修改URL和历史栈，不触发页面刷新或自动渲染，必须手动监听popstate事件并执行渲染逻辑，且首次加载需主动读取location.pathname初始化视图，服务端还需配置fallback以防404。
直接用 history.pushState() 不会自动更新页面内容，也不会响应浏览器后退/前进——你必须手动监听 popstate 事件并调用渲染逻辑，否则用户点返回时 URL 变了但页面卡死。
为什么只调用 pushState 页面不更新
pushState() 的作用只是往历史栈里加一条记录、改地址栏，它不触发任何跳转或重载，也不调用你的渲染函数。这是设计使然，不是 bug。
- 常见错误：在点击链接里只写
history.pushState({ path: '/user' }, '', '/user')，没接后续动作 - 后果：URL 变成
/user，但 DOM 还是首页内容；用户点浏览器后退，URL 变回/，页面却不动 - 根本原因：
popstate事件只在用户操作导航（后退/前进/history.go()）时触发，不会在pushState()或replaceState()调用时触发 - 正确做法：每次
pushState()后，立刻手动执行一次渲染，比如renderRoute('/user')
如何让 a 标签点击不刷新但走 History 路由
不能靠给每个 <a> 加 onclick，得用事件委托统一拦截，同时处理相对路径、跨域、锚点等边界情况。
- 用
e.target.closest('a[href]')安全捕获任意嵌套层级的链接（比如<span><a>设置</a></span>） - 必须检查
link.hostname === location.hostname，排除https://google.com、mailto:、tel:等非本站链接 - 别用
link.getAttribute('href')拼接 URL，要用new URL(link.href)解析，它自动处理<base href="/app/">和相对路径 - 对
href以#开头（如#section2）或含download属性的链接，直接放行，不拦截
popstate 事件为什么不触发首屏渲染
popstate 只响应历史栈变化，而页面首次加载不属于“历史变化”——它是从空栈开始的，所以这个事件压根不会触发。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 后果：用户直接访问
/settings/profile，popstate不执行，renderRoute()永远不调，页面白屏 - 解决方式：在 JS 初始化时，主动读取
location.pathname并调用一次渲染，例如renderRoute(location.pathname || '/') - 注意
event.state可能为null（比如用户手输 URL 后按后退），别直接解构，要兜底用location.pathname - 不要把 token、表单数据塞进
state对象——刷新就丢，它只适合存轻量路由元信息，比如{ tabId: 'notifications', scrollY: 200 }
服务端不配 fallback 就算前端写对也白搭
用户刷新 /user/123 页面时，请求会发到服务端；如果 Nginx 或 Vercel 没配置 fallback，就会返回 404，而不是你的 index.html。
- 开发时（Vite/Webpack Dev Server）：开
server.historyApiFallback: true - Nginx 部署：加
try_files $uri $uri/ /index.html;到 location 块里 - Vercel：默认支持，但需确保
vercel.json里有"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] - 路径前缀要对齐：前端写
history.pushState(..., '/admin/users')，服务端就必须把所有/admin/*请求都 fallback 到入口 HTML
最容易被忽略的是：首次加载和 popstate 必须共享同一套路由匹配逻辑，且 state 对象不能过大（Chrome 限制约 640KB），否则会被截断导致 event.state 不完整。
