router.push()

追加一条新历史记录，追加后浏览器可以点后退

// 两种写法
router.push('/user')
router.push({ name: 'User', params: { id: 1 } })

行为

1. 浏览器历史栈新增一条记录
2. 点击浏览器返回按钮可以回到上一页
3. 最常用：普通页面跳转（菜单、列表点击进入详情）

router.replace()

替换当前历史记录，不新增，所以浏览器 不可以点后退

router.replace('/login')
router.replace({ path: '/home' })

行为

1. 不会新增历史记录，直接覆盖当前这条
2. 返回按钮无法回到跳转前页面
3. 适用场景：登录成功跳转、重定向、表单提交后跳转、防止回退重复操作

历史栈直观对比

假设当前栈：[A]

• push(B) → 栈：[A, B] 返回可回到A
• replace(B) → 栈：[B] 无法返回A

适用场景

✅ push

• 列表 → 详情
• 菜单正常跳转
• 需要支持返回上一页

✅ replace

• 登录页 → 首页（防止回退又回到登录页）
• 404页面重定向
• 搜索页刷新筛选条件（不想保留旧搜索历史）
• 支付完成跳转结果页（禁止回退再次提交）