Nuxt3でルーティングの設定と画面遷移を実装してみた #JavaScript

はじめに

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の中身をすべて削除し、以下のようにします。

app.vue

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

NuxtPageコンポーネントは画面遷移を実装するために必須です。

次に、pagesディレクトリを作成し、その中にindex.vue、about.vueを作成し、それぞれ以下のようにします。

index.vue

<template>
  <h1>index.vueの中身です。</h1>
</template>

about.vue

<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行を追加します。

index.vue

<template>
  <h1>Main Page</h1>
//以下の1行を追加
  <nuxt-link to="/about">about.vueへ</nuxt-link>
</template>

nuxt-linkタグでページ遷移を実装できます。to=”[遷移先のパス]”で遷移先を指定します。

ホームディレクトリは以下のようになります。

「about.vueへ」をクリックすると、先ほどのabout.vueの中身が表示されます。

ちなみに、scriptタグ内でページ遷移を実行したい場合は、navigateTo関数を使用します。
以下がそのコードです。

index.vue

<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ファイルを作成し、以下のようにします。

[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にてよろしくお願いします！

Nuxt3でルーティングの設定と画面遷移を実装してみた

はじめに

開発環境

実装

Nuxt3プロジェクトの作成

ファイル構成

複数ページの作成

画面遷移の実装

【発展編】動的ルーティング

おわりに

参考文献