Vue 路由中的 pushState 与 replaceState 有什么区别？原理级解析-Vue.js-PHP中文网

Vue Router 的 history 模式底层依赖浏览器 pushState（新增历史记录）和 replaceState（替换当前记录）；router.push() 调用前者，router.replace() 调用后者；二者均不触发页面刷新，仅更新 URL 和历史栈，并由 popstate 事件驱动视图切换。

vue 路由中的 pushstate 与 replacestate 有什么区别？原理级解析

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 事件时附带返回，常用于传递页面间轻量数据（比如滚动位置、筛选条件）：

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

它只在同源页面间有效，且不能包含函数、DOM 节点等不可序列化内容；
刷新页面后，state 会丢失（浏览器规范如此），所以不能依赖它做持久状态管理；
Vue Router 内部用它存了路由元信息（如 matched routes），但你一般不需要手动操作它。

为什么 URL 改了页面却不刷新？

因为 pushState 和 replaceState 本质是「修改地址栏 + 更新历史栈」，不触发任何网络请求，也不重新加载文档。Vue Router 监听 popstate 事件，在用户点击浏览器前进/后退时捕获变化，再匹配路由规则、切换组件、更新视图 —— 整个过程完全在前端完成。

这种机制让单页应用有了多页体验，而 hash 模式则靠监听 hashchange 实现类似效果，只是 URL 带 # 且无需服务端配置支持。