Vue.jsでページを切り替える「Vue Router」の利用法を解説！ TypeScriptの型定義とともに活用しよう

TypeScriptで学ぶJavaScriptフレームワーク「Vue.js」の利用法 第7回

TypeScriptを利用したVue Routerのルート指定

　プロジェクトでTypeScriptの利用を指定した場合、routes配列の要素には内部的に型が指定されており、型に合致しない記述はエラーとなります（図3）。

図3　Vue Routerのroutes指定エラー（p001-basic）

　routes配列の要素に指定されている型（つまり指定できるルートの種類）は、表1に示す5パターンです。なお、この5パターンのルートは、Vue Router内部でRouteRecordRaw型として定義されており、RouteRecordRaw型は内部的に表1の「ルートの型」に示した5つの型のいずれかであると定義されています。

表1　Vue Routerで指定できるルートの種類

No.	パスに対応するコンポーネント	ルートの型
1	1つのコンポーネント	RouteRecordSingleView
2	1つのコンポーネントとn個の子要素	RouteRecordSingleViewWithChildren
3	n個のコンポーネント	RouteRecordMultipleViews
4	n個のコンポーネントとm個の子要素	RouteRecordMultipleViewsWithChildren
5	別のパスへのリダイレクト	RouteRecordRedirect

　各パターンについて、図4のサンプルで説明します。画面上部の各リンクのパスに対応して、画面下部の「Vue Routerの出力結果」にコンポーネントが表示されます。

図4　Vue Routerのルート指定方法を説明するサンプル（p002-route-record-raw）

例1）1つのパスに1つのコンポーネント

　もっとも単純なのは、1つのパスに1つのコンポーネントを対応付けるパターンです。リスト4の指定では、「/single」というパスでSingleViewコンポーネントを表示します。

［リスト4］例1のVue Router設定（p002-route-record-raw/src/router/index.ts）

{
  path: '/single',
  component: SingleView
},

　コンポーネントを表示するApp.vueには、リスト5の通り<RouterView>が設定されていますが、リスト4の場合はname属性がついていない（2）の<RouterView>にコンポーネントが表示され、（1）と（3）には何も表示されません。（1）と（3）にコンポーネントを表示させる例は後述します。

［リスト5］図4のサンプルの<RouterView>記述（p002-route-record-raw/src/App.vue）

<RouterView name="Header" /><!-- ヘッダーのRouterView ...（1）-->
<RouterView /><!-- デフォルトのRouterView ...（2）-->
<RouterView name="Footer" /><!-- フッターのRouterView ...（3）-->

　結果として、画面には図5の通り表示されます。

図5　リスト4のルートで表示されたコンポーネント（p002-route-record-raw）

例2）1つのコンポーネントとn個の子要素

　Vue Routerでパスを入れ子にする場合のルート指定をリスト6に示します。

［リスト6］例2のVue Router設定（p002-route-record-raw/src/router/index.ts）

{
  path: '/single-with-children',
  component: SingleViewWithChildren,
  children: [
    {
      path: 'child1',
      component: ChildView1
    },
    {
      path: 'child2',
      component: ChildView2
    }
  ]
},

　path、component要素と並列に存在するchildren要素の中に、path、component要素が入れ子になっています。この場合、親コンポーネント内に子コンポーネントが入れ子になって表示されます。親コンポーネント（SingleViewWithChildren.vue）には、リスト7の通り<RouterView>が記述されており、ここに子コンポーネントが表示されます。

［リスト7］子コンポーネントを表示するコンポーネント（p002-route-record-raw/src/SingleViewWithChildren.vue）

<template>
  <div>SingleViewWithChildren（単一ビュー、子要素あり）</div>
  <div>↓↓↓子要素↓↓↓</div>
  <RouterView />
  <div>↑↑↑子要素↑↑↑</div>
</template>

　結果として、パスが「/single-with-children/child1」の場合は、親コンポーネントの内部に子コンポーネント（ChildView1）が表示されます。パスが「/single-with-children/child2」の場合は子コンポーネントがChildView2になります（図6）。

図6　リスト6のルートで表示されたコンポーネント（p002-route-record-raw）

例3）n個のコンポーネント

　リスト8は、1つのパスに複数のコンポーネントを指定する例です。パス「/multiple」に対して「default」「Header」「Footer」3つのコンポーネントを指定します。

［リスト8］例3のVue Router設定（p002-route-record-raw/src/router/index.ts）

{
  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の表示となります。

図7　リスト8のルートで表示されたコンポーネント（p002-route-record-raw）

例4）n個のコンポーネントとm個の子要素

　例2の子要素と、例3の複数コンポーネントを組み合わせて、リスト9の通り指定することもできます。「/multiple-with-children」というパスに対して、default／Header／Footerの3コンポーネントと、2つの子要素を指定しています。

［リスト9］例4のVue Router設定（p002-route-record-raw/src/router/index.ts）

{
  path: '/multiple-with-children',
  components: {
    default: MultipleViewWithChildren,
    Header: HeaderView,
    Footer: FooterView
  },
  children: [
    {
      path: 'child1',
      component: ChildView1
    },
    {
      path: 'child2',
      component: ChildView2
    }
  ]
},

　表示内容は図8の通りで、ヘッダーとフッターが付与されたコンポーネントの内部に子コンポーネントが表示されます。

図8　リスト9のルートで表示されたコンポーネント（p002-route-record-raw）

例5）別のパスへのリダイレクト

　あるパスが指定された時に、他のパスにリダイレクトさせることができます。リスト10の例では、「/」へアクセスした際、「/single」へリダイレクトされます。

［リスト10］例5のVue Router設定（p002-route-record-raw/src/router/index.ts）

{
  path: '/',
  redirect: '/single'
}