TypeScriptを利用したVue Routerのルート指定
プロジェクトでTypeScriptの利用を指定した場合、routes配列の要素には内部的に型が指定されており、型に合致しない記述はエラーとなります（図3）。
routes配列の要素に指定されている型（つまり指定できるルートの種類）は、表1に示す5パターンです。なお、この5パターンのルートは、Vue Router内部でRouteRecordRaw型として定義されており、RouteRecordRaw型は内部的に表1の「ルートの型」に示した5つの型のいずれかであると定義されています。
| No. | パスに対応するコンポーネント | ルートの型 |
|---|---|---|
| 1 | 1つのコンポーネント | RouteRecordSingleView |
| 2 | 1つのコンポーネントとn個の子要素 | RouteRecordSingleViewWithChildren |
| 3 | n個のコンポーネント | RouteRecordMultipleViews |
| 4 | n個のコンポーネントとm個の子要素 | RouteRecordMultipleViewsWithChildren |
| 5 | 別のパスへのリダイレクト | RouteRecordRedirect |
各パターンについて、図4のサンプルで説明します。画面上部の各リンクのパスに対応して、画面下部の「Vue Routerの出力結果」にコンポーネントが表示されます。
例1）1つのパスに1つのコンポーネント
もっとも単純なのは、1つのパスに1つのコンポーネントを対応付けるパターンです。リスト4の指定では、「/single」というパスでSingleViewコンポーネントを表示します。
{
path: '/single',
component: SingleView
},
コンポーネントを表示するApp.vueには、リスト5の通り<RouterView>が設定されていますが、リスト4の場合はname属性がついていない（2）の<RouterView>にコンポーネントが表示され、（1）と（3）には何も表示されません。（1）と（3）にコンポーネントを表示させる例は後述します。
<RouterView name="Header" /><!-- ヘッダーのRouterView ...（1）--> <RouterView /><!-- デフォルトのRouterView ...（2）--> <RouterView name="Footer" /><!-- フッターのRouterView ...（3）-->
結果として、画面には図5の通り表示されます。
例2）1つのコンポーネントとn個の子要素
Vue Routerでパスを入れ子にする場合のルート指定をリスト6に示します。
{
path: '/single-with-children',
component: SingleViewWithChildren,
children: [
{
path: 'child1',
component: ChildView1
},
{
path: 'child2',
component: ChildView2
}
]
},
path、component要素と並列に存在するchildren要素の中に、path、component要素が入れ子になっています。この場合、親コンポーネント内に子コンポーネントが入れ子になって表示されます。親コンポーネント（SingleViewWithChildren.vue）には、リスト7の通り<RouterView>が記述されており、ここに子コンポーネントが表示されます。
<template> <div>SingleViewWithChildren（単一ビュー、子要素あり）</div> <div>↓↓↓子要素↓↓↓</div> <RouterView /> <div>↑↑↑子要素↑↑↑</div> </template>
結果として、パスが「/single-with-children/child1」の場合は、親コンポーネントの内部に子コンポーネント（ChildView1）が表示されます。パスが「/single-with-children/child2」の場合は子コンポーネントがChildView2になります（図6）。
例3）n個のコンポーネント
リスト8は、1つのパスに複数のコンポーネントを指定する例です。パス「/multiple」に対して「default」「Header」「Footer」3つのコンポーネントを指定します。
{
path: '/multiple',
components: {
default: MultipleView,
Header: HeaderView,
Footer: FooterView
}
},
「Header」と名前を付けたHeaderViewコンポーネントはリスト4（1）の<RouterView name="Header" />の箇所に、「Footer」と名前を付けたFooterViewコンポーネントはリスト4（3）の<RouterView name="Footer" />の箇所に、それぞれ表示されます。「default」と名前を付けたMultipleViewコンポーネントは、リスト4（2）の<RouterView />（name属性なし）の箇所に表示されるので、結果として図7の表示となります。
例4）n個のコンポーネントとm個の子要素
例2の子要素と、例3の複数コンポーネントを組み合わせて、リスト9の通り指定することもできます。「/multiple-with-children」というパスに対して、default／Header／Footerの3コンポーネントと、2つの子要素を指定しています。
{
path: '/multiple-with-children',
components: {
default: MultipleViewWithChildren,
Header: HeaderView,
Footer: FooterView
},
children: [
{
path: 'child1',
component: ChildView1
},
{
path: 'child2',
component: ChildView2
}
]
},
表示内容は図8の通りで、ヘッダーとフッターが付与されたコンポーネントの内部に子コンポーネントが表示されます。
例5）別のパスへのリダイレクト
あるパスが指定された時に、他のパスにリダイレクトさせることができます。リスト10の例では、「/」へアクセスした際、「/single」へリダイレクトされます。
{
path: '/',
redirect: '/single'
}
