history.pushState 不触发页面跳转是设计使然，仅修改 URL 和历史栈，需手动监听 popstate 并更新视图；React 中应统一使用 useNavigate 避免栈不同步；Vue 的 keep-alive 需在 activated 中检查路由变化；history.state 刷新后丢失，状态需分层持久化。
history.pushState 为什么没触发页面跳转
调用 history.pushState 后 URL 改变了，但页面没刷新、也没执行任何渲染逻辑——这不是 bug，是设计如此。它只改地址栏和历史栈，不触发导航或重新加载。
你需要自己监听 popstate 事件，并在回调里手动更新视图（比如切换组件、重绘 DOM）：
window.addEventListener('popstate', (e) => {
renderComponent(e.state.componentName);
});
-
pushState第一个参数是 state 对象，必须是可序列化的（不能含函数、DOM 节点） - Chrome 和 Firefox 支持 state 任意大小，但 Safari 限制约 64KB，超限会静默失败
- 直接修改 URL（如
location.href = '/new'）会触发完整页面加载，绕过 history API 的单页体验
React 中 useNavigate 和 window.history 混用导致状态丢失
用 useNavigate（React Router v6+）后，再手动调用 history.pushState，会导致 router 内部 history 栈和浏览器原生栈不同步——返回时组件不更新，甚至报错 MissingRouterContext。
统一用 React Router 提供的导航方式：
立即学习“前端免费学习笔记（深入）”；
Ainative React Sdk
下载
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
- 替换原生
pushState→ 改用navigate('/path', { state: { ... } }) - 监听返回/前进 → 用
useLocation+useEffect响应 location 变化，而非popstate - 需要保留非路由相关状态（如表单草稿）？把它们存进
state参数，或用sessionStorage同步备份
Vue Router 的 keep-alive 与 history 记录冲突
开启 <keep-alive> 后，组件实例被缓存，但 beforeRouteUpdate 不一定触发，导致历史记录“看起来没变”——其实是组件没收到新 props 或没重载数据。
关键处理点：
- 在
activated钩子中检查this.$route是否变化，必要时手动fetch - 避免依赖
created或mounted初始化数据，它们只执行一次 - 如果要用
scrollBehavior恢复滚动位置，确保返回时目标元素存在（document.getElementById判空后再scrollIntoView）
history.state 在页面刷新后为空
刷新页面时，history.state 会丢失——这是浏览器标准行为，不是你的代码问题。所有通过 pushState 存入的状态都会清空。
持久化方案要分层处理：
- URL 路径本身应携带必要信息（如
/search?q=react&page=2），服务端和前端都可解析 - 临时状态（如筛选条件、折叠面板）存
sessionStorage，比localStorage更安全（关 Tab 即丢，不污染下次访问） - 不要把大对象塞进
state，更别试图序列化 Vue/React 组件实例——它们无法被 JSON 安全保存
最常被忽略的是：history API 不负责状态管理，它只管导航记录。状态同步、恢复、持久化，全得你自己补上一层逻辑。
