【Vue基礎】Vue Routerのネストを理解する

Vue Routerとは

Vue Routerは、Vueで「ページ遷移」「URLごとの表示切り替え」を実現する公式ライブラリで、Vueの中でSPA構築を行うためのルーティング制御にたいして、さまざまな機能を利用することができます。その中でも親ルートの中に子ルートを持たせる「ネスト」は、Vueアプリケーションの中でも使用頻度が多い仕組みかと思います。

ネストを使う

例として、ECサイトやブログのユーザーページを作成、下記構造があるとします。

• /user → ユーザートップページ

• /user/profile → プロフィールページ

• /user/settings → 設定ページ

ネストは、親ルート「user」の中に階層構造・入れ子構造のページ構造を作ることができる仕組みです。

ネストルートの基本構成

上のユーザー構造を実現する例として、例えば下記構成です。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import UserLayout from '@/views/UserLayoutView.vue'
import UserProfile from '@/views/UserProfileView.vue'
import UserSettings from '@/views/UserSettingsView.vue'
const router = createRouter({
  history: createWebHistory(),
  routes :  [
    {
      path: '/user',
      component: UserLayout,
      children: [
        {
          path: 'profile',         // /user/profile
          component: UserProfile
        },
        {
          path: 'settings',       // /user/settings
          component: UserSettings
        }
      ]
    }
  ]
export default router

【POINT】

• 親ルート user に children 配列を持たせる

• 子ルートの path はスラッシュ / をつけない（相対パス）

• 子ルートのURLは親の /user に続くかたちになる (例　/user/profile)

コンポーネント側にRouterViewを用意する

親コンポーネント（例として UserLayout.vue）の中に、子ルートを表示する場所を用意。

  <!-- UserLayout.vue -->
  <template>
    <div>
      <h2>ユーザーページ共通レイアウト</h2>
     <RouterView />
    </div>
  </template>

<RouterView>の中に、子コンポーネントUserProfile / UserSettingsが差し込まれる仕組みです。

動的パラメータを使いたい場合

ユーザーログインidなどパラメータを動的に処理・取得したい場合

{
  path: '/user/:id',
  component: UserLayout,
  children: [
    {
      path: 'profile',
      component: UserProfile
    },
    {
      path: 'settings',
      component: UserSettings
    }
  ]
}

:id を足すことで、:id の部分はパラメータとして使えて、子コンポーネント内で useRoute() を使って id
を取得することができます。

import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)

話がそれてしまいますが、idが数字だけ許可するバリデーションかける場合は

path: '/user/:id(\\d+)'   //idは絶対に数字だけ制限できる

これで数字だけ許可するバリデーション対策ができましたが、必ず画面側だけじゃなく、サーバー/API側でちゃんと存在するIDかを確認することが重要です。

:idと:id*の違いは？

今回のユーザーidを取得してからのプロフィールや設定へのルートをつなげるには、:idが正しい扱いですね。もしid番号3の情報を取得したい場合、

• :id(スラッシュ無しの1個の値をキャプチャ)　id = "3"

• :id*(スラッシュをまたいで全部キャプチャ)　id = "3/profile/abc"

・/user/3/profile →　id=3, かつ profileページへ

・/user/3/settings →　id=3, かつ settingsページへ

となります。

router-viewとRouterViewの書き方はどちらが正しいのか？

結論はどちらでも動きますが、細かなお話をしますと小文字 <router-view> は昔からあるVue2時代からの形式で、Vue 3でも互換性のためにそのまま動くようになっています。一方、パスカルケース形式 <RouterView> はVue3公式推奨です。ではなぜパスカルケースが推奨されているかと言いますと、自動インポートや型補完といったTypeScriptやVolar（VSCode拡張）は、パスカルケースを前提としています。例えば、Vue 3 + Vite + Volarで作ると

<template>
  <RouterView />
  <MyButton />
  <UserCard />
</template>

上記のように、パスカルケースでコンポーネントを書けば補完が出て、さらに型チェックもできます。また、Vue3公式ドキュメント（Vue Style Guide）でも、

• コンポーネントファイル名：パスカルケース

• テンプレート上のコンポーネント使用：パスカルケース

公式でもパスカルケースを推奨していますので、大文字始まりで統一ってことですね。

まとめ

今回は、JavaScriptのフレームワークVueでよく利用されるVueRouterの機能のひとつネストについて、紹介をさせていただきました。ネストはアプリケーションを作るにあたり必須の仕組みですので、基本をマスターできれば柔軟に対応できますね。

以上となります。できる限りわかりやすく伝えようとしても書くのは難しいです。
コードや記事の書き方について気になるところがあれば、アドバイスいただけると嬉しいです。