TypeScript5.3~5.0の新機能をまとめて学ぶ
【Vue+Router】CompositionAPIのナビゲーションガードの書き方
Vue Router4.x系のナビゲーションガードではVue3のComposition API用に新しいものが提供されています。だけどbeforeRouteEnterに該当するガードが無い…と少し戸惑ったので備忘録を残します。この記事ではComposition API用の関数の紹介、beforeRouteEnterに該当するガードが無い理由とその対処方法について説明しています。
新旧コンポーネントガード
Vue Router4.x系ではコンポーネントガードをsetup()内で使えるように、onXXX()形式で新しい関数が提供されています。対応表は以下のようになります。
| Options API(今まで) | Composition API |
|---|---|
| beforeRouteLeave | onBeforeRouteLeave |
| beforeRouteUpdate | onBeforeRouteUpdate |
| beforeRouteEnter | なし |
ご覧の通りbeforeRouteEnterに対応するonBeforeRouteEnterのようなものはありません。
onBeforeRouteEnterがない理由
beforeRouteEnterは「コンポーネントへのナビゲーション前」に呼ばれます。対して、setup()が呼ばれる頃にはすでにナビゲーションが完了してしまっています。よってsetup()内でonXXで呼び出すようなことはできないのです。
きちんと意味を考えたら当たり前のことでした。
解決策
これまで通り、beforeRouteEnterを使います。コンポーネントガードなら、場所はsetup()と併記します。
setup() {},
beforeRouteEnter() {}まとめ
この記事ではComposition API用の関数の紹介、beforeRouteEnterに該当するガードが無い理由とその対処方法について説明しました。
参考
公式ドキュメント：CompositionAPIのナビゲーションガード
https://next.router.vuejs.org/guide/advanced/composition-api.html#navigation-guards
