ユーザデータの登録・編集ページ等、入力ページの更新時や意図しないページ遷移時に「入力内容が破棄されます」等のアラートを出したい。WindowEventHandlers.onbeforeunloadを使います。
WindowEventHandlers.onbeforeunload
Window: beforeunload イベント - Web API | MDN
beforeunload イベントは、ウィンドウ、文書、およびそのリソースがアンロードされる直前に発生します。文書はまだ表示されており、この時点ではイベントはキャンセル可能です。
developer.mozilla.org
画面が閉じられる際に発生するイベントです。このイベントを使用することで、画面を閉じる際、画面遷移時、更新ボタン押下時にアラートを出すことができます。
こんなやつですね。きっと見たことあるやつ。
例えば、ユーザ情報の登録・編集ページ等で、「誤ってページ遷移して、戻ったら入力内容がなくなっちゃった」みたいな事故を減らすことができますね。
実装
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 ...
developer.mozilla.org
まだ、Vue.jsの環境で検証してないので、試してみたら実装とか追記します。
