はじめに
Nuxt3プロジェクトでルーティングの設定と画面遷移を実装してみました。
Vue Routerを使う場合と比べ、とても簡単です。
Nuxt3を使用して画面遷移が必要なアプリケーションを作成したい方におすすめです。
開発環境
- Windows 11
- Nuxt.js 3.0.0-rc.6
- npm 8.19.4
- Node.js 16.20.0
実装
Nuxt3プロジェクトの作成
-
Nuxt3プロジェクトを作成します。
npx nuxi@latest init nuxt3-app-test -
作成したNuxt3プロジェクトのディレクトリに移動します。
cd nuxt3-app-test -
依存関係をインストールします。
npm install -
試しに開発モードで起動します。
npm run dev -- -o
以下のような画面が表示されればNuxt3プロジェクトの作成完了です。
ファイル構成
最終的なファイル構成は以下のとおりです。
[プロジェクト名]/
├── pages/
├── index.vue
├── about.vue
├── project/
├── [projectNumber].vue
複数ページの作成
app.vueの中身をすべて削除し、以下のようにします。
<template>
<div>
<NuxtPage />
</div>
</template>
NuxtPageコンポーネントは画面遷移を実装するために必須です。
次に、pagesディレクトリを作成し、その中にindex.vue、about.vueを作成し、それぞれ以下のようにします。
<template>
<h1>index.vueの中身です。</h1>
</template>
<template>
<h1>about.vueの中身です。</h1>
</template>
現在のページのファイル名を表示する簡単なコードです。
npm run dev でサーバを再度立ち上げると、以下のような画面が表示されます。
URL：http://localhost:3000/
ホームディレクトリである、index.vueの中身が表示されました。
URLの末尾に "/about" を追加して読み込むと、以下のような画面が表示されます。
URL：http://localhost:3000/about
Vue Routerの場合、ルーティング設定のファイルを別に作成する必要がありますが、Nuxt3ではファイル名に基づいて自動的にルーティングが生成されます。例えば、ファイル名が about.vueの場合、Nuxt3は自動的に /about のURLパスを生成し、about.vueの中身を表示します。
Vue Routerを使われていた方は、この手軽さに驚かれると思います。
画面遷移の実装
次に画面遷移を実装していきます。
index.vueに以下の1行を追加します。
<template>
<h1>Main Page</h1>
//以下の1行を追加
<nuxt-link to="/about">about.vueへ</nuxt-link>
</template>
nuxt-linkタグでページ遷移を実装できます。to=”[遷移先のパス]”で遷移先を指定します。
ホームディレクトリは以下のようになります。
「about.vueへ」をクリックすると、先ほどのabout.vueの中身が表示されます。
ちなみに、scriptタグ内でページ遷移を実行したい場合は、navigateTo関数を使用します。
以下がそのコードです。
<template>
<h1>Main Page</h1>
<a @click="goToAboutPage">about.vueへ</a>
</template>
<script setup>
const goToAboutPage = () => {
navigateTo('/about')
}
</script>
【発展編】動的ルーティング
Nuxt3では動的ルーティングも簡単に作成することができます。
pagesディレクトリの中にprojectディレクトリを作成します。
projectディレクトリの中に[projectNumber].vueファイルを作成し、以下のようにします。
<template>
<h1>プロジェクトNo.: {{ route.params.projectNumber }}</h1>
</template>
<script setup>
const route = useRoute()
</script>
[]で囲まれている、「projectNunber」に動的な値が格納されます。
project/1というパスにアクセスすると以下のような画面が表示されます。
続いて、project/100というパスにアクセスすると以下のような画面が表示されます。
projectNunberの値に応じて動的にルーティングが作成されることが確認できました。
しかし、この状態では、projectNumberに数字だけでなく、文字列も入力できてしまいます。実際のアプリケーション開発時には、数字以外の入力を制限するバリデーションが必要です。
おわりに
今回は、Nuxt3プロジェクトでルーティングの設定と画面遷移を実装してみました。
ファイル名に応じたパスが自動的に生成されるのは、とても便利ですよね。
最後までお読みいただき、ありがとうございました！
記事に関する質問等ございましたら、コメントまたは以下のDMにてよろしくお願いします！
参考文献