👈

Vue Routerでブラウザバックを無効化する(Composition API)

2021/12/06に公開

結論

import { useRouter } from 'vue-router'

export default {
  setup() {
    // ルーターを使用
    const router = useRouter()

    // ブラウザバックを無効化
    addEventListener("popstate", () => {
      router.push("自分自身のパス")
    })
  }
}

詳細

まず、addEventListenerpopstateを監視し、ブラウザの戻るボタンを検知します。
そして、

router.push("自分自身のパス")

とすることで、戻るボタンを押したときに現在のページへ遷移するようになります。その結果、ブラウザバックを無効化することができます。
ちなみに、ルートに名前を付けている場合は

router.push({ name: "ルートの名前" })

でも大丈夫です。

Discussion