Vue Router ページの表示時と離脱時のイベントをコンポーネントで設定する
Vue Rtouterでページの表示時と離脱時のイベントをコンポーネントで設定する方法を紹介します。
ページ表示時
ページ表示時のイベントはbeforeRouteEnterを使用します。
beforeRouteEnterはページの初期表示時に実行されます。
注意点として、beforeRouteEnterの処理ではthisが参照できないため、例えばdataに定義してた変数や、methodに定義した処理を参照できません。
以下のようにnextファンクションのパラメータにファンクションを指定するとthisに相当するパラメータが渡されるので、そこでコンポーネントの処理を行えます。
（async、awaitの記載は任意です。非同期処理を行う場合など、必要に応じて記載してください。）
export default {
beforeRouteEnter(to, from, next) {
this.initialize(); // thisは参照できないためエラー
next(async (vm) => {
await vm.initialize(); // vmはthisに相当します
next();
});
},
methods: {
async initialize() {
// 初期処理
},
},
};ページ離脱時
ページ離脱時のイベントはbeforeRouteLeaveを使用します。
beforeRouteLeaveではthisでコンポーネント内のdataやmethodなどの参照が可能です。
例えばページ離脱時に確認メッセージを表示して、キャンセルできるようにしたい場合は以下のようにします。
nextファンクションを呼ばずにreturnすることにより、ページ離脱のイベントがキャンセルされ、現在のページにとどまることができます。
export default {
beforeRouteLeave(to, from, next) {
if (this.confirm() === false) return;
next();
},
methods: {
confirm() {
return window.confirm('ページを離脱してもよろしいですか？');
},
},
};