ルートメタフィールドと型付け
meta: { requiresAuth: true }、型付きmetaのためのTypeScript宣言マージ
「ルートメタフィールドと型付け」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
ルートメタフィールドとは
すべてのルートには meta オブジェクトを持たせられます。これはルートに関連付ける任意のデータです。認証要件、許可するロール、ページタイトル、レイアウトの選択などのフラグに最適です。
ルートにメタデータを追加する
ルートレコードに meta キーを設定します。値は自由に決められます。
const routes = [
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true, roles: ['admin', 'editor'] }
}
]ガードでメタデータを読み取る
最も一般的な用途はナビゲーションガードです。router.beforeEach はすべてのナビゲーションの前に実行され、対象ルートを受け取ります。その meta を調べることができます。
router.beforeEach((to, from) => {
if (to.meta.requiresAuth) {
// check login
}
})認証されていないユーザーをリダイレクトする
リダイレクトするには、ガードからルートロケーションを返します。false を返すとナビゲーションがキャンセルされ、何も返さないか true を返すと許可されます。
router.beforeEach((to) => {
const auth = useAuthStore()
if (to.meta.requiresAuth && !auth.isLoggedIn) {
return { path: '/login' }
}
})ロールベースのアクセス制御
roles メタフィールドと現在のユーザーのロールを組み合わせて、権限に基づいてページへのアクセスを制限します。
router.beforeEach((to) => {
const auth = useAuthStore()
const roles = to.meta.roles
if (roles && !roles.includes(auth.role)) {
return { path: '/forbidden' }
}
})メタデータは親からマージされる
ネストされたルートは、to.meta を通じて親のメタデータを継承します。これは一致したすべてのレコードをマージしたものです。子ルートでは、同じキーを上書きしない限り親のメタデータが見えます。
型付けに関する問題
デフォルトでは、TypeScript は meta を空のオブジェクトとして型付けするため、to.meta.requiresAuth でエラーになります。これを解決するには、Vue Router の型に対して宣言マージを行います。
型付きメタデータを宣言する
vue-router の RouteMeta インターフェースを拡張します。これを .d.ts ファイル、または export {} を含む任意のモジュールに記述します。
import 'vue-router'
declare module 'vue-router' {
interface RouteMeta {
requiresAuth?: boolean
roles?: string[]
}
}
export {}これでメタデータが型チェックされる
拡張後は、コンパイラーが meta の構造を認識します。requireAuth のようなタイプミスが検出され、オートコンプリートも機能します。
router.beforeEach((to) => {
if (to.meta.requiresAuth) { /* typed as boolean | undefined */ }
})コンポーネントでメタデータを使う
コンポーネント内では、useRoute() を通じて現在のルートのメタデータを読み取れます。拡張のおかげで、これにも型が付きます。
import { useRoute } from 'vue-router'
const route = useRoute()
const secure = route.meta.requiresAuthページタイトルにメタデータを使う
よく使われる方法は、メタデータに title を保存し、グローバルガードから document.title に設定することです。
router.afterEach((to) => {
if (to.meta.title) document.title = to.meta.title
})理解度チェック
ルートメタデータと型付けについての知識を確認します。
まとめ
ルートメタフィールドには、ルートごとのデータを格納します。
- ルートレコードにメタデータ（requiresAuth、roles、title）を定義します。
- router.beforeEach で読み取り、ナビゲーションを制御します。
- メタデータは親ルートから子ルートへマージされます。
- vue-router の RouteMeta に対する宣言マージで型付けします。
よくある質問
「ルートメタフィールドと型付け」レッスンは無料ですか？
はい。「ルートメタフィールドと型付け」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「ルートメタフィールドと型付け」で何を学びますか？
meta: { requiresAuth: true }、型付きmetaのためのTypeScript宣言マージ ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「ルートメタフィールドと型付け」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ルートメタフィールドと型付け
- ルート遷移とアニメーション
- スクロール動作の設定
- プログラムによるナビゲーションとuseRouter