【Vue+Router】CompositionAPIのナビゲーションガードの書き方 | TekRog
Vue Router4.x系のナビゲーションガードではVue3のComposition API用に新しいものが提供されています。だけどbeforeRouteEnterに該当するガードが無い…と少し戸惑ったので備忘録を残します。この記事ではComposition API用の関数の紹介、beforeRouteEnterに該当するガードが無い理由とその対処方法について説明しています。 新旧コンポーネントガード Vue Router4.x系ではコンポーネントガードをsetup()内で使えるように、onXXX()形式で新しい関数が提供されています。対応表は以下のようになります。 Options API(今まで)Composition API
Vue3 Composition API でのVue Routerの使い方 - Qiita
<script lang="ts"> import { defineComponent } from 'vue' import { useRoute, useRouter } from 'vue-router' export default defineComponent({ setup() { const router = useRouter() const route = useRoute() const fetch = () => { const { id } = route.params store.getTodo(id) } const goHome = () => { router.push('/') } return { goHome, } }, }) </script> useRoute()関数から取得できるrouteオブジェクトは、リアクティブとなっています。 なお、テン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
