Vue.jsでブラウザバックを検知する方法

概要

ブラウザバックを検知して、Vue.jsのプロパティに論理値をセットすることによってVueコンポーネント内でブラウザバックしたかどうかを判定できるようにする。

プログラム

Vue.jsのプロパティに「$browserBackFlg」をセット

app.js

// ブラウザバックを検知してコンポーネントで「this.$browserBackFlg」で使用できるようにする。
Vue.prototype.$browserBackFlg = false
history.replaceState(null, '', null)
window.addEventListener('popstate', function() {
  Vue.prototype.$browserBackFlg = true

  window.setTimeout(() => {
    Vue.prototype.$browserBackFlg = false
  }, 500)
})

history.replaceState(stateObj, title, [url])

現在の履歴を編集し、メソッドに渡された stateObj、title、URLパラメータによって置き換えます。
強制的に履歴を残すことで、履歴が変更されたことを検知させます。
https://developer.mozilla.org/ja/docs/Web/API/History/replaceState

window.addEventListener('popstate', function() {})

popstateをイベントリスナーに登録することにより、履歴項目が変わるたびにウィンドウに発行されます。

window.setTimeout(() => , 500)

window.setTimeoutを使用して500ミリ秒後に「$browserBackFlg」をfalseにします。
これがないと、永遠に「$browserBackFlg」がtrueのままになってしまいます。

セットした「$browserBackFlg」を使ってVueコンポーネント内でブラウザバック検知

Home.vue

<script>
export default {
  created() {
    if (this.$browserBackFlg) {
      // ブラウザバック時の処理
    }
    else {
      // ブラウザバック時でなく普通のページ遷移のときの処理
    }
  }
}
</script>