Vue.js+VueRouterでページの離脱、再読込、別ルートへの移動時に警告を表示する - Make組ブログ

ページの離脱時に警告を表示するには、 beforeunload イベントを使えば簡単にできます。 ですが、Vue.jsでVueRouterを使っている場合、ページの移動で beforeunload イベントは発生しません。 理由はブラウザーの画面自体が切り替わっていないからです（ページの遷移はVueRouter, つまりJavaScriptが同一の画面内で制御している）。 WordPressやDropboxPaperも、ページ離脱時には confirm() やモーダル表示を使ってページ遷移時に警告を表示しています （もちろんbeforeunload時の警告も併用しています）。 Vue.js + VueRouterでページ離脱、再読込時に警告を表示する 以下のように beforeunload を使えば良いです（クロスブラウザー対応どうこうはうまく書き換えてください）。 methods: {