Webアプリケーションでは、画面の中に別の画面を表示したいことがよくあります。例えば、ユーザーページの中にプロフィールや設定などの画面を切り替えて表示したい場合です。Vue Routerを使うと、このような「入れ子」になった画面構成を簡単に作ることができます。この記事では、Vue Routerの「ネストされたルート」機能を使って、階層的な画面構成を作る方法を解説します。



## ネストされたルートの実装

ネストされたルート（入れ子になったルート）とは、親ルートの中に子ルートを配置する仕組みです。例えば、次のようなURLがあるとします。

* `/user` - ユーザーのメインページ
* `/user/profile` - ユーザーのプロフィールページ
* `/user/settings` - ユーザーの設定ページ

このとき、`/user`が親ルート、`/user/profile`と`/user/settings`が子ルートとなります。子ルートを使うと、親ページのレイアウトを保ったまま、中身だけを切り替えることができます。

### ルートの定義

Vue Routerでは、親ルートの`children`オプションを使って子ルートを定義します。`src/router/index.ts` に定義を追加します。

```typescript
// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
// ...省略
import UserPage from '@/views/UserPage.vue'
import ProfilePage from '@/views/ProfilePage.vue'
import SettingsPage from '@/views/SettingsPage.vue'

const routes = [
	// ... 省略
	// ネストされたルート
  {
    path: '/user',
    component: UserPage,
    children: [
      { path: 'profile', component: ProfilePage },
      { path: 'settings', component: SettingsPage }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router  
```

この例では、親ルート`/user`にUserPageコンポーネントを割り当て、その子ルートとして`profile`と`settings`を定義しています。ここで注意すべき点は、子ルートのパスには先頭の`/`を付けないことです。付けると、絶対パスとして扱われてしまいます。

### ネストされたビューの表示

まずは、親ルートにマッチングさせる`src/views/UserPage.vue` を新たに作成します。

以下は、UserPageコンポーネントの例です：

```html

<template>
  <div>
    <h1>ユーザーページ</h1>

    
    <nav>
      <router-link to="/user/profile">プロフィール</router-link> |
      <router-link to="/user/settings">設定</router-link>
    </nav>

    
    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
// Composition APIとTypeScriptを使用
</script>  
```

この例では、`<router-view>`タグの位置に、現在の子ルート（`/user/profile`または`/user/settings`）に対応するコンポーネントが表示されます。子ルートのコンポーネントを表示するには、親コンポーネント内に`<router-view>`を配置する必要があります。この`<router-view>`の位置に、現在の子ルートに対応するコンポーネントが表示されます。

次に、子ルートのコンポーネントを実装しましょう。 `src/views/ProfilePage.vue` と`src/views/SettingsPage.vue` を以下のように実装します。

```html

<template>
  <div>
    <h2>プロフィールページ</h2>
    <p>ここにユーザーのプロフィール情報が表示されます。</p>
  </div>
</template>

<script setup lang="ts">
</script>  
```

```html

<template>
  <div>
    <h2>設定ページ</h2>
    <p>ここでユーザー設定を変更できます。</p>
  </div>
</template>

<script setup lang="ts">
</script>
```

`http://localhost:5173/user/` にアクセスすると、「プロフィール」と「設定」へのリンクが配置されており、親ルートの表示を維持したまま、\<router-view>の位置に、現在の子ルートに対応するコンポーネントが表示されているかと思います。これが、ネストされたルートの実装方法です。

## まとめ

Vue Routerのネストされたルートを使うと、階層構造のある画面を簡単に作ることができます。ネストされたルートを使いこなすことで、複雑な画面構成も効率よく管理できるようになります。大規模なアプリケーションを開発する際には、ぜひこの機能を活用してみてください。

## 次のステップに進みませんか？

基礎を理解したところで「次は何を学べばいいのだろう？」「実際のプロジェクトではどう活用するの？」と感じていませんか？

Vue.jsの基礎を学んでも、実際の開発現場で使いこなせなければ意味がありません。基礎だけではなく、コンポーネント設計、状態管理、ルーティングなど、実践的なスキルを身につけることが重要です。

**[Vue.js実践マスター講座：基礎から本格SPAアプリケーション開発まで](https://tech-education-nav.com/videos/67ae89a5774715d50252e9df)**

この動画講座では、Vue.jsの全機能を体系的に学べます。合計7時間以上にわたる包括的な内容で、基礎だけでなく「認証付き記事管理システム」という実際のアプリケーションを一から開発していきます。

**＜期間限定特典＞**

講座を作成したエンジニアとの1時間マンツーマン相談会付き！分からなかった部分の質問はもちろん、キャリアやお仕事の相談もOK。学んだ内容を確実に自分のものにするチャンスです。

この機会にVue.jsの可能性を最大限に引き出すスキルを身につけましょう。

[詳細を見る・購入する](https://tech-education-nav.com/videos/67ae89a5774715d50252e9df)

ネストされたルートの構成

Vue Routerでネストされたルートを構成する方法を詳しく解説。childrenオプションを使った子ルートの定義、<router-view>の活用、親子間でのパラメータ共有と活用例を紹介します。

Vue Routerで階層的な（ネストされた）ルートを作成する方法

動画チュートリアルのこだわりと、なぜ私の講座が有益なものを提供できるか。その理由を書きました。

最新のNuxt.js講座をリリースしました！初心者から経験者まで、現場で即活用できる実践ノウハウを動画で学べます。

Vue.jsの動画チュートリアルを公開しました！Vue.js の基礎だけでなく、実践的な使い方を学びたい方は、是非チェックしてみてください。