vue3.x教程：路由push和replace 作者：马育民 • 2026-08-01 20:16 • 阅读：10012 # router.push() **追加一条新历史记录**，追加后浏览器可以点后退 [](https://www.malaoshi.top/upload/0/0/1GW3mfwgbJKT.png) ```ts // 两种写法 router.push('/user') router.push({ name: 'User', params: { id: 1 } }) ``` ### 行为 1. 浏览器历史栈新增一条记录 2. 点击浏览器**返回按钮**可以回到上一页 3. 最常用：普通页面跳转（菜单、列表点击进入详情） # router.replace() **替换当前历史记录，不新增**，所以浏览器 **不可以点后退** ```ts router.replace('/login') router.replace({ path: '/home' }) ``` ### 行为 1. **不会新增历史记录**，直接覆盖当前这条 2. 返回按钮**无法回到跳转前页面** 3. 适用场景：登录成功跳转、重定向、表单提交后跳转、防止回退重复操作 ### 历史栈直观对比 假设当前栈：`[A]` - push(B) → 栈：`[A, B]` 返回可回到A - replace(B) → 栈：`[B]` 无法返回A # 适用场景 ### ✅ **push** - 列表 → 详情 - 菜单正常跳转 - 需要支持返回上一页 ### ✅ **replace** - 登录页 → 首页（防止回退又回到登录页） - 404页面重定向 - 搜索页刷新筛选条件（不想保留旧搜索历史） - 支付完成跳转结果页（禁止回退再次提交） 原文出处：/show_1GW3mfyMiXkb.html