【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