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

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

コンポーネントにパラメーターを渡す方法

　一般にVue Routerを利用する際には、パスに含まれる文字列をパラメーターとしてコンポーネントに渡して利用します。そのような例を図9のサンプルで説明します。

図9　コンポーネントにデータを渡すサンプル（p003-params）

パラメーター渡しの基本

　図9で、上側「route渡し」のルート指定はリスト11の通りです。（1）のpath「/fruit1/:name/:price/:count」のうち、コロンが先頭についた文字列（name、price、count）の部分がパラメーターで、FruitView1コンポーネントに渡されます。

［リスト11］routeでコンポーネントにパラメーターを渡すVue Router設定（p003-params/src/router/index.ts）

{
  path: '/fruit1/:name/:price/:count',
  component: FruitView1
},

　FruitView1コンポーネントの実装はリスト12の通りです。（2）のuseRouteメソッドで、ルートの情報を含む変数routeを取得し、（1）の通り、route.params.<パラメーター名>で値を取得します。

［リスト12］FruitView1コンポーネント（p003-params/src/views/FruitView1.vue）

<template>
  <!-- route.paramsからパラメーターを取得 ...（1）-->
  <div>名前：{{ route.params.name }}</div>
  <div>価格：{{ route.params.price }}円</div>
  <div>個数：{{ route.params.count }}</div>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router'
const route = useRoute() // routeはルートの情報を含む ...（2）
</script>

　このコンポーネントに値を渡す際は、<RouterLink>にリスト13の通りパスを渡すことで、name：Apple、price：300、count：5がFruitView1コンポーネントに渡されます。

［リスト13］コンポーネントにパラメーターを渡すリンク（p003-params/src/App.vue）

<RouterLink to="/fruit1/Apple/300/5">（略）</RouterLink>

　なお、<RouterLink>のリンクではなく、プログラムの処理でコンポーネントに値を渡して表示させることもできます。詳細は公式ページを参照してください。

型定義が利用できる、プロパティ（props）でのデータ渡し

　リスト12では、コンポーネント内でuseRouteメソッドを利用して、ルートの情報を直接取得していました。この方法ではコンポーネントの利用にVue Routerが前提となり、Vue Routerを利用しない環境でコンポーネントが再利用できなくなります。また、route.paramsは任意のパラメーターを保持できるため、TypeScriptのメリットを生かせません。

　このような問題への対応として、パラメーターをルートではなく、コンポーネントのプロパティ（props）として渡す方法を紹介します。

　propsでのパラメーター渡しを利用するには、router/index.tsでリスト14の通り、propsプロパティにtrueを指定してルートを定義します。

［リスト14］propsでコンポーネントにパラメーターを渡すVue Router設定（p003-params/src/router/index.ts）

{
  path: '/fruit2/:name/:price/:count',
  component: FruitView2,
  props: true // propsによるパラメーター渡しを有効化
}

　対応するFruitView2コンポーネントの実装はリスト15となります。（2）のdefinePropsメソッドで、string型のnameとnumber型のprice、countを受け取るよう指定し、（1）のprops.<パラメーター名>でパラメーターを画面に反映します。

［リスト15］FruitView2コンポーネント（p003-params/src/views/FruitView2.vue）

<template>
  <!-- propsからパラメーターを取得 ...（1）-->
  <div>名前：{{ props.name }}</div>
  <div>価格：{{ props.price }}円</div>
  <div>個数：{{ props.count }}</div>
</template>
<script setup lang="ts">
const props = defineProps<{ // パラメーターの名前、型をpropsに定義 ...（2）
  name: string,
  price: number,
  count: number
}>()
</script>

　この場合、TypeScriptによりpropsに型が設定されるため、name、price、count以外をpropsから取得する記述はエラーになります。

図10　propsに含まれない変数を指定した時のエラー（p003-params/src/views/FruitView2.vue）

まとめ

　本記事では、Vue.jsでコンポーネントを切り替え表示するVue Routerの利用法を説明しました。プロジェクトでTypeScriptを有効にして、ルート指定の記述やコンポーネントのパラメーターで型チェックを利用でき、より堅牢な実装ができます。

　次回は、Vue 3で推奨されている状態管理ツールPiniaについて説明します。

参考資料

• Vue.js