0Pricing
Vue Academy · レッスン

ネストしたルートと動的ルート

ネストしたレイアウトと動的なルートパラメーターを構築します

「ネストしたルートと動的ルート」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全3レッスンが含まれています。

静的ルートの先へ

実際のアプリでは、データを持ち、レイアウト内にネストできるルートが必要です。

  • 動的セグメントはidのような値を取得します
  • ネストされたルートは親の中に子を表示します
  • 名前付きルートとプログラムによるナビゲーションで柔軟性が高まります

動的ルートセグメント

コロンを使うと、任意の値にマッチする動的セグメントを定義できます。

const routes = [
  { path: "/user/:id", component: UserProfile }
]

// Matches /user/1, /user/42, /user/abc

route.paramsへのアクセス

取得した値はroute.paramsから読み取ります。

<script setup>
import { useRoute } from "vue-router"

const route = useRoute()
console.log(route.params.id)
</script>

パラメーターの変更への対応

パラメーターだけが変わる場合（例: /user/1から/user/2）、コンポーネントは再利用されます。パラメーターを監視してデータを再読み込みします。

import { watch } from "vue"
import { useRoute } from "vue-router"

const route = useRoute()
watch(() => route.params.id, (newId) => {
  loadUser(newId)
})

複数の動的セグメント

ルートには複数の動的な部分を含めることができます。

const routes = [
  { path: "/user/:userId/post/:postId", component: Post }
]

// route.params.userId and route.params.postId

ネストされたルート

ネストされたルートを使うと、子ルートを親コンポーネント内に表示できます。

const routes = [
  {
    path: "/user/:id",
    component: UserLayout,
    children: [
      { path: "profile", component: Profile },
      { path: "posts", component: Posts }
    ]
  }
]

ネストされたrouter-view

子を表示するには、親コンポーネントにも独自のrouter-viewが必要です。

<!-- UserLayout.vue -->
<template>
  <h1>User</h1>
  <router-view></router-view>
</template>

<!-- /user/1/profile renders Profile here -->

名前付きルート

ルートにnameを付けると、パスを直接記述せずにそのルートを参照できます。

const routes = [
  {
    path: "/user/:id",
    name: "user",
    component: UserProfile
  }
]

名前によるリンク

router-linkでは、名前付きルートを指定し、パラメーターをオブジェクトとして渡せます。

<router-link
  :to="{ name: 'user', params: { id: 42 } }"
>
  View User
</router-link>

プログラムによるナビゲーション

ルーターのpushメソッドを使うと、JavaScriptから移動できます。

import { useRouter } from "vue-router"

const router = useRouter()

function goToUser(id) {
  router.push({ name: "user", params: { id } })
}

その他のナビゲーションメソッド

ルーターには、ナビゲーション用のヘルパーがほかにもあります。

  • router.pushは新しい履歴エントリを追加します
  • router.replaceは新しい履歴エントリを追加せずに移動します
  • router.backは前のページに戻ります

理解度チェック

動的ルートとネストされたルートについての理解度を確認します。

まとめ: ネストされたルートと動的ルート

高度なルーティングを学びました。

  • 動的セグメント（/user/:id）はroute.paramsから取得できます
  • ネストされたルートはchildrenとネストされたrouter-viewで定義します
  • 名前付きルートを使うと、名前でリンクできます
  • router.pushでプログラムによるナビゲーションを行います

次はナビゲーションガードです。

よくある質問

「ネストしたルートと動的ルート」レッスンは無料ですか？

はい。「ネストしたルートと動的ルート」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全3レッスンが含まれています。

「ネストしたルートと動的ルート」で何を学びますか？

ネストしたレイアウトと動的なルートパラメーターを構築します ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。

「ネストしたルートと動的ルート」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Vue Routerの設定
  2. ネストしたルートと動的ルート
  3. ナビゲーションガード
← Vue Academyに戻る