this.$router.push 与 this.$router.replace 跳转的区别

目录

1. this.$router.push(入栈)

2. this.$router.replace(替换)

3. 总结

4. 补充：this.$router.go(n)

this.$router.push 和 this.$router.replace 是 Vue Router 中用于编程式导航的两种核心方法，它们的主要区别在于对浏览器历史记录的处理方式不同。
 

1. this.$router.push(入栈)

功能：当调用 push 时，Vue Router 会在历史记录栈的 顶部添加一个新记录（就像放上一个新盘子），然后跳转到新页面。

效果：用户可以通过浏览器的后退按钮返回到上一个页面 。

使用场景：适用于需要保留历史记录的常规页面跳转，例如从列表页跳转到详情页 。

示例流程：

1. 你在页面 A (/pageA)。
2. 执行 this.$router.push('/pageB')。
3. 你跳转到了页面 B (/pageB)。