「vue-router」の記事 - Crieit

Nuxt.jsで編集中に、ページ移動やページを閉じるときに警告を出すやつ

2020-02-19T19:57:45+09:00

よくある編集中に、ページを離れると、
「編集中のデータが消えちゃうよ」
と教えてしてくれるやつを調べたときの備忘録。

ページを閉じるときに出るこんなのや

戻るや別のページに移動しようとするときに出るこんなの

ソースコード

中身はこんな感じ。Mixinで実装してるけど、pageでもOK。

ページを閉じるときと、ページを移動するときとで処理が異なり、

ページを閉じるとき ... windowのbeforeunloadイベントでハンドリング
ページを移動するとき ... vue-routerのbeforeRouteLeaveでハンドリング

という感じになる。

なにも編集してないときに出るのが嫌なので、
isBlockUnloadというフラグを使って制御できるようにしてる。

import Vue from "vue";
import Component from "vue-class-component";

@Component
export default class BlockUnloadMixin extends Vue {
  // 表示するメッセージ
  protected blockUnloadMessage = "編集した内容が消えちゃうけど、移動する？";
  // アラートを出すかのフラグ
  protected isBlockUnload: boolean = false;

  // ****************************
  // * ページを閉じるときの処理: beforeunloadイベント
  // ****************************
  created() {
    if (process.client) {
      // 作成時にイベントリスナーに登録
      window.addEventListener("beforeunload", this.checkWindow);
    }
  }

  beforeDestroy() {
    // 破棄される前にイベントリスナーから削除
    window.removeEventListener("beforeunload", this.checkWindow);
  }

  // 実際の処理
  protected checkWindow(event: BeforeUnloadEvent) {
    if (!!this.isBlockUnload) {
      // unloadをキャンセルして、メッセージを表示
      event.preventDefault();
      event.returnValue = this.blockUnloadMessage;
    }
  }

  // ****************************
  // * ページを移動するときの処理: v-router
  // ****************************
  beforeRouteLeave(to, from, next) {
    if (!!this.isBlockUnload) {
      // アラートダイアログを表示して、結果に応じて遷移
      const msg = this.blockUnloadMessage;
      const answer = window.confirm(msg);
      next(answer);
    } else {
      // next()は必ず呼び出さないといけない
      next();
    }
  }
}