[リサーチ・メモ] ナビゲーションガード

ナビゲーションガードとは

リダイレクトもしくはキャンセルによって遷移をガードするために主に使用される
→画面遷移の際にデータのチェックを実施する機能

ナビゲーションガードの種類と使い方

ガード変数to, from, nextについて

ガード変数	内容
to	遷移先のルートオブジェクト
from	遷移元のルートオブジェクト
next	ナビゲーションを続行または中止する関数 ※next(false) を呼び出すとナビゲーションが中止され、next('/') のようにパスを指定するとそのパスにリダイレクトする

beforeEach :画面遷移前に実行される

→会員作成画面から確認画面へ遷移する際にデータが格納されているか確認する時などに使用

router.beforeEach((to, from, next) => {
    if (to.name === 'ConfirmMemberRegistration' && !store.state.memberInfo) {
        alert('登録情報が失われました。もう一度登録をお願いします。');
    } else {
        next(); //画面遷移する
    }
});

beforeResolve:すべてのナビゲーションガードが解決された後に実行される

→データの整合性が取れたログを出力する時などに使用

router.beforeResolve((to, from, next) => {
  // ...
  next()
})

afterEach:画面遷移後に実行される

→会員登録完了後のメッセージ表示等に使用
※nextは使用できない

router.afterEach((to, from) => {
  if (to.path === '/success') {
    showMessage('Operation completed successfully!');
  }
});