Nuxt3で動的ルーティングを生成するには[id].vueを作成する
  • 2022.03.09に公開
  • Nuxt3
  • 0. Nuxt3
  • No.4 / 9
現在このカテゴリーは、Nuxt3パブリックベータ版の情報を公開しています。変更の可能性が大きくあるので、最新の情報は Nuxt3の公式サイト をご確認ください。

Nxut3で動的ルーティングを生成するには

[]で囲まれたページファイルを作成することで動的ルーティングが生成されます。

pages
├── index.vue
├── products
│   ├── [id].vue <= 動的ルーティングのコンテンツが表示される
│   └── index.vue

ファイル名とキーは一致する

ここのid任意の名前でOKですが、パラメーターのキーとなるので意味がわかりやすい名前にしましょう。

  • [id].vueの場合 => params.idでパラメーターを取得する
  • [name].vueの場合 => params.nameでパラメーターを取得する

touchコマンドはシングルクォーテーションで囲む

ちなみにファイルを作成するtouchコマンドは[](括弧)を認識しません。

% touch pages/[id].vue                          

zsh: no matches found: pages/[id].vue

シングルクォーテーションで囲むことでエラーを回避できます。

% touch pages/'[id].vue'

Nuxt2の動的ルーティング

Nuxt2までは、先頭に_がついたページファイルを作成していました。

pages
├── index.vue
├── products
│   ├── _id.vue <= 動的ルーティングのコンテンツが表示される
│   └── index.vue

Nxut3では先頭パス固定の動的ルートも生成できる

_から解放されたことで、こんな動的ルーティングも生成できるようです。

ページファイル
-| pages/
---| index.vue
---| users-[group]/
-----| [id].vue
生成されるパス

/users-admins/123

パラメーターの受け取り
<template>
  {{ $route.params.group }}
  {{ $route.params.id }}
</template>

引用: Nuxt 3 - Pages directory

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
独学プログラマ
独学でも、ここまでできるってよ。
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。