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

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

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

ソースコード

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

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

1. ページを閉じるとき ... windowのbeforeunloadイベントでハンドリング
2. ページを移動するとき ... 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();
    }
  }
}

Mixinsを使う例

使うときはこんな感じ。

<template>
  <div><!-- 略... --></div>
</template>

<script lang="ts">
import { Component, Vue, mixins } from "nuxt-property-decorator";

// minins
import BlockUnloadMixin from "~/mixins/BlockUnloadMixin";

// ※ mixinsでBlockUnloadMixinを追加
@Component
export default class CreateMap extends mixins(BlockUnloadMixin) {

  // なんかあたりが更新されるときによばれるなにか
  private changeValue(val: string) {
    // 略...

    // ※ 変更があったら、アラートを出すフラグをONにする
    this.isBlockUnload = true;
  }
}
</script>

以上!!

へんあいマップをリリースしました！

「偏愛マップ」を簡単に作れるWebアプリです!

偏愛マップは人見知りや口下手な人にも優しいコミュニケーションツールで、
勉強会、懇親会、オフ会などの余興・アイスブレイクや自分のプロフィールにも！

よかったら遊んでみてください(´ω｀)

好きを集めた自己紹介マップ｜へんあいマップ

参考にしたサイト様

• Vue.jsでbeforeunloadを正しく実装する | blog.fukata.org
• vue.jsでフォームを離脱するときに警告をだすやつを実装する - Qiita
• nuxtjs_memo.md
• [Javascript] Webページからの離脱時に確認メッセージを表示する方法 │ Web備忘録
• Window: beforeunload イベント - Web API | MDN