ホーム

転職ドラフト(次回12/15)

Nuxt3のルーティング、ダイナミックルーティングを使う方法

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

⇨ Vue 記事の目次はこちら

Nuxt3 を触ってみています。

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

nuxt routing

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

pages/about/index.vue

といった構成でディレクトリを作れば勝手にルーティングを作ってくれるみたいなやつで、ルーティング用のファイルがいらないものです。

環境
node --version v16.13.0
Nuxt3

目次

  1. 結論
  2. ページを追加したら yarn dev しないとダメっぽい

結論

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

<template>
  <div>
    <NuxtPage/>
  </div>
</template>

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 ディレクトリは初期搭載されていないので自分で作成する必要があります。

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

nuxt routing2

ページを追加したら yarn dev しないとダメっぽい

絶対にやり方はあってるのに、ダイナミックルーティングでページが表示されないときは、ローカルサーバーを建て直してみる

ローカルサーバーを止める

Control + C

ローカルサーバーを建てる

yarn dev

まとめ

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

個人的にはダイナミックルーティングの方が好きですが、ルーティングファイルを別で作る方がやりやすいパターンってのもあるんでしょうか?

もっと色々知りたい方は公式ページ

苦情、誤りに関する指摘は下の Twitter の DM から頂ければ幸いです。

それでは!