Vue
Nuxt3のルーティング、ダイナミックルーティングを使う方法
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
PR
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 をつけることでレンダリング条件を変えることができますが、詳しくは以下を読んでみてください
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 でダイナミックルーティングで動かすところまでを記事にしてみました。
誰かの参考になれば幸いです。
フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。