モーダルなどのコンポーネント内で、ブラウザバックを無効化したい時ありますよね。
これまでは毎回個別に書いていたんですが、まとめるととってもシンプルになりました！
完成系
composables内に下記ファイルを作成
composables/usePreventBrowserBack.ts
export const usePreventBrowserBack = (callback?: () => void) => {
const handlePopState = () => {
history.go(1)
callback?.() // 実行したい関数があれば
}
onMounted(() => {
history.pushState(null, '', location.href) // 現在のURLを履歴に追加
addEventListener('popstate', handlePopState)
})
onUnmounted(() => {
removeEventListener('popstate', handlePopState) // ブラウザバックの無効化を解除
})
}
コンポーネント内
components/modal.vue
<script setup lang="ts">
usePreventBrowserBack()
</script>
これだけ！
ブラウザバックした時に何らかの処理を入れたい場合
その場合はcallbackに関数を入れてください。
例えば、ブラウザバックしたらそのモーダルを閉じる処理を適用したい場合
components/modal.vue
<script setup lang="ts">
const handleClose = () => {
・・・（ここに閉じる処理）・・・
}
usePreventBrowserBack(handleClose)
</script>
説明
history.pushState(null, '', location.href)で、次の履歴に現在のURLを追加。
history.go(1)で、次に進む → 実際には今のURLにとどまる。
アンマウント時にremoveEventListenerで解除し、ブラウザバックが可能になる。
参考
Discussion