複数のページを切り替える、Nuxt.jsのルーティング機能を学ぼう

JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用 第3回

動的なルーティング

　図1、2のサンプルでは、各ページに固定の（静的な）パスを利用しましたが、パスを動的に設定することもできます。この方法を、図3のサンプルで説明します。図1のサンプルに「Apple（iPad）」と、実在しないメーカーのリンクを追加しています。実在しないメーカーのリンクをクリックすると、リストが空のページが表示されます。

図3：動的なルーティングのサンプル（p002-dynamic）

　このサンプルでの、pagesフォルダー配下の配置を図4に示します。動的に設定したいパスのファイル名やフォルダー名に、アンダースコア（「_」）から始まる文字列（ここでは「_vendor」）を設定します。

図4：動的なルーティングを行うpagesフォルダー配下の配置（p002-dynamic）

　「_vendor」の部分のパスは任意文字列にマッチします。例えば、「Android/Samsung」「Android/SHARP」「Android/SOFT」といったパスに対して、Android/_vendor.vueのページが表示されます。

　パスの「_vendor」の部分に設定された文字列は、ページの*.vueファイルから取得できます。Android/_vendor.vueの実装（リスト2）で取得方法を説明します。

［リスト2］動的なルーティングのパラメーターを取得する実装（p002-dynamic/pages/Android/_vendor.vue）

<template>
  <div class="container">
    <h1>{{ $route.params.vendor }}</h1><!--（1）-->
    <ul v-if="phoneData[$route.params.vendor]"><!--（2）-->
      <li v-for="phone in phoneData[$route.params.vendor].phones"
        v-bind:key="phone.id"><!--（3）-->
        {{ phone.name }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // データ変数 ...（4）
      phoneData: {
        Samsung: {
          phones: [
            { id: 1, name: 'Galaxy Note10+' },
（略）
          ]
        },
        SHARP: {
          phones: [
            { id: 1, name: 'AQUOS sense3' },
（略）
          ]
        }
      }
    }
  }
}
</script>

　パスの「_vendor」の部分に設定された文字列は、（1）の通り「$route.params.vendor」変数から取得できます。ここでは、メーカーごとのスマートフォンリストを保持するphontData変数（4）に、「_vendor」部分の文字列（メーカー名）に対応するデータが存在するかどうかを（2）のv-ifディレクティブで確認して、存在する場合のみ（3）のv-forディレクティブでリスト表示しています。そのため、データが存在する「Android/Samsung」「Android/SHARP」のパスではリストが表示されますが、データが存在しない「Android/SOFT」のパスではリストが表示されません。

　$route.params.vendorをテンプレートから直接参照するのではなく、リスト3の通り、算出プロパティを定義して利用する方法もあります。

［リスト3］動的なルーティングのパラメーターを算出プロパティにする実装（p002-dynamic/pages/_vendor/iPad.vue）

<template>
  <div class="container">
    <h1>{{ phoneVendor }}（iPad）</h1><!--（1）-->
（略）
  </div>
</template>
<script>
export default {
（略）
  computed: {
    // 算出プロパティ ...（2）
    phoneVendor() {
      return this.$route.params.vendor
    }
  }
}

　（2）で、this.$route.params.vendorを取得する算出プロパティphoneVendorを定義して、（1）で参照します。

　なお、v-if、v-forディレクティブや算出プロパティについては、前回記事も参考にしてください。

［補足］パラメーターの入力チェック

　ページの表示前に動的なルーティングのパラメーターを入力チェックするには、リスト4の通り、<script>にvalidateメソッドを記述します。

［リスト4］動的なルーティングのパラメーターを入力チェックする実装（p002a-dynamic-validate/pages/_vendor/index.vue）

<script>
export default {
  validate({ params }) {
    return params.vendor === 'Apple'
  },
（略）
</script>

　validateメソッドの引数に渡されるパラメーターの変数paramsに対して必要なチェックを行って、問題なければtrue、エラーならfalseを返却するようにします。戻り値がfalseの場合、ページ内容の代わりに図5のエラー画面が表示されます。

図5：入力チェックのエラー画面（p002a-dynamic-validate）

　実装の詳細はp002a-dynamic-validateサンプルを参照してください。

［補足］パスが存在しないときのページ

　アンダースコアから始まるファイル名のページは任意のパスに対応するため、図6の通りpagesフォルダー直下に「_.vue」ファイルを配置することで、パスに対応するページがないときに表示されるページを設定できます。

図6：_.vueファイルの配置（p002b-dynamic-matchall）

　実装の詳細はp002b-dynamic-matchallサンプルを参照してください。