【Vue】VueRouterでページ遷移時に、URL履歴を残さない方法

はじめに

VueRouterでページ遷移時に、URL履歴が残ってしまうことで少し困ってしまったのでメモを残します。

経緯

先日、Vueを使ってSPAで開発中にページからページCに遷移させる間にローディングページBを挟んで、ローディングページBでいろいろ処理をさせる形で開発をしていました。

その中でページCで、ブラウザバックしたらローディングページBに遷移できてしまうと気付きました。
さらに、ブラウザバック時はクエリパラメータを維持しているURLのままブラウザバックできてしまう...

方法

結論：VueRouterのpushではなくreplaceを使用すること

Example.vue

<template>
  ...
</template>

<script>
  ...
  push () {
    // VueRouterのHistoryに追加して遷移する
    this.$router.push('Next')
  },
  replace () {
    // VueRouterのHistoryに追加しないまま遷移する
    this.$router.replace('Next')
  }
  ...
</script>

参照