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