Vue モーダルエディタの入力途中離脱対策をする

参考

qiita.com

created に addEventListener と Vue 特有の beforeRouteLeave がある

Window Add Event Listener の before unload に confirm を登録する

とりあえず moutned で確認を仕込む

この記事を見ると、window.addEventListener で beforeunload の動きに

method で confirm を使う関数を仕込めばできるようだ

なお returnValue はほとんどのブラウザで基本入らない

mounted() {
  window.addEventListener('beforeunload', this.confirmWindowClose)
},
methods: {
  confirmWindowClose(event) {
    event.returnValue = 'hoge'
  }
},

仮に mount されたときに window に before unload イベントを登録し

引数の関数を methods: で作って セットすると

このようにリロード時に警告が出てくれるようになる。

しかしこれはモーダルを開く前にリロードする際も毎回開いてうざい。

---

モーダルの状態変数の作成と開く時の処理を書く

別記事にした。

watch で開いたり閉じたりしたときに 離脱処理を有効化したり無効化したりする

後でね

---

beforeRouteLeave を使って戻る時のイベントを防止する

参考の記事にこちらも乗っているが、

新しく URL を手打ちしたり、ブックマークバーの URL に移動するのを防ぐのは

addEventListener の beforeunload がやってくれる

しかし戻る時の処理はこっち。SPA のあれ。

またその名前の通り、ルート、つまり URL が変わる前の処理なので

ブラウザのタブの favicon がぐるぐる回ったりしないので邪魔にならない

編集中のみなどの条件をつければ同じかもしれないが...