【Vue.js】ページの更新時などに離脱防止アラートを出す

ユーザデータの登録・編集ページ等、入力ページの更新時や意図しないページ遷移時に「入力内容が破棄されます」等のアラートを出したい。WindowEventHandlers.onbeforeunloadを使います。

WindowEventHandlers.onbeforeunload

Window: beforeunload イベント - Web API | MDN
beforeunload イベントは、ウィンドウ、文書、およびそのリソースがアンロードされる直前に発生します。文書はまだ表示されており、この時点ではイベントはキャンセル可能です。

画面が閉じられる際に発生するイベントです。このイベントを使用することで、画面を閉じる際、画面遷移時、更新ボタン押下時にアラートを出すことができます。

こんなやつですね。きっと見たことあるやつ。

例えば、ユーザ情報の登録・編集ページ等で、「誤ってページ遷移して、戻ったら入力内容がなくなっちゃった」みたいな事故を減らすことができますね。

実装

window.onbeforeunloadイベントをページ表示時に設定して、ページ破棄時にそのイベントをnullで埋める。

...
mounted: function () {
    window.onbeforeunload = function () {
      return '保存されていないデータは破棄されます。'
    }
 },
destroyed () {
    window.onbeforeunload = null
 }
...

既知の問題

iOSのSafariでは動作しないことが分かっています。その環境では、pagehideイベントを使うと良いみたい。

Window: pagehide event - Web APIs | MDN
The pagehide event is sent to a Window when the browser hides the current page in the process of presenting a different ...

まだ、Vue.jsの環境で検証してないので、試してみたら実装とか追記します。

タイトルとURLをコピーしました