Vue Router 的 history 模式底层依赖浏览器 pushState（新增历史记录）和 replaceState（替换当前记录）；router.push() 调用前者，router.replace() 调用后者；二者均不触发页面刷新，仅更新 URL 和历史栈，并由 popstate 事件驱动视图切换。
Vue 路由本身不直接暴露 pushState 和 replaceState，但它们是 Vue Router（尤其是 history 模式）底层真正起作用的浏览器原生 API。区别不在 Vue，而在浏览器历史栈的操作逻辑。
核心行为差异：加一条记录 vs 换掉当前记录
两者都属于 window.history 对象的方法，参数完全一致（state、title、url），但对浏览器历史栈的影响截然不同：
- pushState：在历史栈末尾「新增」一项，用户点击后退时会回到上一个状态（即前一页）；前进/后退按钮可正常导航整条链路。
- replaceState：「替换」当前这一项，历史栈长度不变，用户点后退不会回到被替换掉的那一页，而是继续往更早的记录走。
Vue Router 中谁在用它们？
vue-router 的 router.push() 默认调用 pushState，router.replace() 则调用 replaceState。这不只是命名对应，更是行为映射：
- 登录成功跳转首页，用
router.replace('/home')—— 避免用户点后退又回到登录页，造成重复提交或状态错乱。 - 从列表页点进详情页，用
router.push('/detail/123')—— 用户理应能后退回到列表页。 - 弹窗页（如图片预览）若不想留下历史记录，可手动调用
history.replaceState或配合router.replace+ 动态路由参数实现无痕跳转。
state 参数不是摆设，但有关键限制
两个方法的第一个参数 state 是一个 JS 对象，会在触发 popstate 事件时附带返回，常用于传递页面间轻量数据（比如滚动位置、筛选条件）：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
- 它只在同源页面间有效，且不能包含函数、DOM 节点等不可序列化内容；
- 刷新页面后，
state会丢失（浏览器规范如此），所以不能依赖它做持久状态管理； - Vue Router 内部用它存了路由元信息（如 matched routes），但你一般不需要手动操作它。
为什么 URL 改了页面却不刷新？
因为 pushState 和 replaceState 本质是「修改地址栏 + 更新历史栈」，不触发任何网络请求，也不重新加载文档。Vue Router 监听 popstate 事件，在用户点击浏览器前进/后退时捕获变化，再匹配路由规则、切换组件、更新视图 —— 整个过程完全在前端完成。
这种机制让单页应用有了多页体验，而 hash 模式则靠监听 hashchange 实现类似效果，只是 URL 带 # 且无需服务端配置支持。
