router.push和router.replace的区别

router.push会往history栈里增加一个元素,而router.replace不会

当使用router.push跳转后,我们可以通过后退按钮返回上一面,而router.replace跳转后,点击后退按钮会直接退出
我们可以尝试一下,通过router.push / router.replace跳转后再点击后退按钮,看看有什么不同

<template>
  <div>
    page1
    <button @click="pushPage2">push</button>
    <button @click="replacePage2">replace</button>
  </div>
</template>

<script>

export default {
  methods: {
    pushPage2 () {
      this.$router.push('/page2')
    },
    replacePage2 () {
      this.$router.replace('/page2')
    }
  }
}
</script>

当我们遇到不希望用户后退的场景,如付款或登录时,我们可以使用router.replace