Nuxt3 のルーティング、ダイナミックルーティングを使う方法について書きました。

はじめに

Nuxt2 のときは、色々ディレクトリがあって、勝手に DynamicRouting していたような気がしたんですが、Nuxt3 では下記のようなディレクトリ構成にしても動きませんでした。

ダイナミックルーティングは、

pages/about/index.vueのように任意にディレクトリとファイルを作るだけで/aboutページのルーティングを作ってくれるというもので、その結果ルーティング用のファイルが不要でした。

結論

app.vue 下記のように書き換える

<template>
  <NuxtPage />
</template>

<NuxtPage />は、Vue で言うところの、RouterView がラッピングされたコンポーネントです。

<NuxtPage page-key="static" />

<NuxtPage :page-key="route => route.fullPath" />

key をつけることでレンダリング条件を変えることができますが、詳しくは以下を読んでみてください

Nuxt - NuxtPage

layouts/default.vue を作る

<template>
  <div>
    <header>
      <li>TOP</li>
      <li>ABOUT</li>
      <li>CONTACT</li>
    </header>
    <main>
      <!-- このslot部分に各ページのレイアウトが入る -->
      <slot />
    </main>
  </div>
</template>

pages/about/index.vue を作る

<template>
  <div>About</div>
</template>

http://localhost:3000/about にアクセスした結果、無事表示されました。

pages や layouts ディレクトリは初期搭載されていないので自分で作成する必要があります。

ディレクトリ構成を画像で貼っておきます。

うまくいかない時

ページを追加したらビルドしなおす

一度、ローカルサーバーを以下のコマンドで停止

Control + C

ローカルサーバーを起動しなおす

yarn dev

または、

npm run dev

おわりに

以上、Nuxt3 でダイナミックルーティングで動かすところまでを記事にしてみました。

誰かの参考になれば幸いです。