Inertia + Vueでリロード時やページ遷移リクエスト時にアラートを出したい・・・

変更を保存せずに移動するときなどにアラートを出したいな～っていうのを叶えようとする記事です．

詳細はドキュメントがすべてを語っている．

https://inertiajs.com/events#before

https://inertiajs.com/events#removing-listeners

結論

blog.vue

import { Inertia } from "@inertiajs/inertia";
export default {
	name:"blog",
	data(){
		return {
			beforeConfirm:"",
		}
	},
	 mounted(){
		window.addEventListener("beforeunload", this.confirmSave); // リロードやタブ削除時のconfirm
		this.moveConfirm = Inertia.on("before", (event) => {
			return confirm("Are you sure you want to navigate away?");
		}); // inertia-linkで遷移するときのconfirm
	},
	unmounted() {
		this.moveConfirm();
		window.removeEventListener("beforeunload", this.confirmSave);
	},
	methods:{
		confirmSave(event) {
			event.returnValue = "編集中のものは保存されませんが、よろしいですか？";
		},
	}
}

２つだけ気がついたこと

1. Inertiaでは，Inertia.on("before",・・・　でリクエストを出す前を判定しているらしく"start"のほうでは意味がなかった

2. LisnerのRemoveはthis.moveConfirm();って呼び出すだけで消せる．便利すぎるね．忘れると，遷移したさきすべてで出てくるようになるのでお気をつけください．

よいLaravel＆Inertiaライフを．
では・・・