面试题：Vue中router.push与router.replace在基本场景下的应用区别

Question

在Vue项目中，假设你有两个页面PageA和PageB，从PageA跳转到PageB，简述使用router.push和router.replace这两种方式的导航操作有何不同，在浏览器历史记录上会有怎样不同的表现？

Answer 1

router.push

• 导航操作：向 history 栈中添加一个新的记录，当用户点击浏览器的后退按钮时，会回到上一个页面（PageA）。这意味着通过 router.push 跳转后，浏览器历史记录会新增一条记录。
• 历史记录表现：会增加一条新的历史记录，用户可以通过后退按钮回到 PageA。

router.replace

• 导航操作：用新的页面（PageB）替换当前页面在 history 栈中的记录，而不是添加新记录。这意味着当用户点击后退按钮时，不会回到 PageA，而是直接离开当前应用（如果 PageB 是栈顶页面），因为 PageA 的记录已经被 PageB 替换掉了。
• 历史记录表现：不会新增历史记录，而是替换当前的历史记录，后退时不会回到 PageA。