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

## はじめに
Nuxt3プロジェクトでルーティングの設定と画面遷移を実装してみました。
Vue Routerを使う場合と比べ、とても簡単です。
Nuxt3を使用して画面遷移が必要なアプリケーションを作成したい方におすすめです。

## 開発環境
- Windows 11
- Nuxt.js 3.0.0-rc.6
- npm 8.19.4
- Node.js 16.20.0


## 実装
### Nuxt3プロジェクトの作成
1. Nuxt3プロジェクトを作成します。

    ```
    npx nuxi@latest init nuxt3-app-test
    ```
1. 作成したNuxt3プロジェクトのディレクトリに移動します。
    ```
    cd nuxt3-app-test
    ```
1. 依存関係をインストールします。
    ```
    npm install
    ```
1. 試しに開発モードで起動します。
    ```
    npm run dev -- -o
    ```
以下のような画面が表示されればNuxt3プロジェクトの作成完了です。  
![localhost_3000_ (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/cdc3ef00-c895-cc55-6165-fabda3455272.png)

### ファイル構成
最終的なファイル構成は以下のとおりです。

```
[プロジェクト名]/
├── pages/
    ├── index.vue
    ├── about.vue
    ├── project/
        ├── [projectNumber].vue
```

### 複数ページの作成
app.vueの中身をすべて削除し、以下のようにします。

```html:app.vue
<template>
  <div>
    <NuxtPage />
  </div>
</template>
```
NuxtPageコンポーネントは画面遷移を実装するために必須です。

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

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

```html:about.vue
<template>
  <h1>about.vueの中身です。</h1>
</template>
```

現在のページのファイル名を表示する簡単なコードです。
    
    
npm run dev でサーバを再度立ち上げると、以下のような画面が表示されます。
URL：http://localhost:3000/ 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/7bd87af1-60d2-0ff9-b7e4-bf8b5c47f904.png)
ホームディレクトリである、index.vueの中身が表示されました。

URLの末尾に "/about" を追加して読み込むと、以下のような画面が表示されます。
URL：http://localhost:3000/about
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/a443935f-1c90-3360-349f-17b047a8caeb.png)

Vue Routerの場合、ルーティング設定のファイルを別に作成する必要がありますが、Nuxt3ではファイル名に基づいて自動的にルーティングが生成されます。例えば、ファイル名が about.vueの場合、Nuxt3は自動的に /about のURLパスを生成し、about.vueの中身を表示します。
Vue Routerを使われていた方は、この手軽さに驚かれると思います。
　　

### 画面遷移の実装
次に画面遷移を実装していきます。
index.vueに以下の1行を追加します。

```html:index.vue
<template>
  <h1>Main Page</h1>
//以下の1行を追加
  <nuxt-link to="/about">about.vueへ</nuxt-link>
</template>
```
nuxt-linkタグでページ遷移を実装できます。to=”[遷移先のパス]”で遷移先を指定します。

ホームディレクトリは以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/0a4db388-8585-f55c-060d-4602e73b6fef.png)


「about.vueへ」をクリックすると、先ほどのabout.vueの中身が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/a443935f-1c90-3360-349f-17b047a8caeb.png)

ちなみに、scriptタグ内でページ遷移を実行したい場合は、navigateTo関数を使用します。
以下がそのコードです。
```javascript: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ファイルを作成し、以下のようにします。
```javascript:[projectNumber].vue
<template>
    <h1>プロジェクトNo.: {{ route.params.projectNumber }}</h1>
</template>

<script setup>
const route = useRoute()
</script>
```
[]で囲まれている、「projectNunber」に動的な値が格納されます。

project/1というパスにアクセスすると以下のような画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/fcb0b98d-405c-2ed2-dc0a-7c567bb697e8.png)

続いて、project/100というパスにアクセスすると以下のような画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/0a3e49d5-73f3-6570-4366-ffcb6d1b4f30.png)

projectNunberの値に応じて動的にルーティングが作成されることが確認できました。
　　
しかし、この状態では、projectNumberに数字だけでなく、文字列も入力できてしまいます。実際のアプリケーション開発時には、数字以外の入力を制限するバリデーションが必要です。
　　
## おわりに
今回は、Nuxt3プロジェクトでルーティングの設定と画面遷移を実装してみました。
ファイル名に応じたパスが自動的に生成されるのは、とても便利ですよね。

最後までお読みいただき、ありがとうございました！

記事に関する質問等ございましたら、コメントまたは以下のDMにてよろしくお願いします！

https://twitter.com/t___tatsuki

## 参考文献

https://reffect.co.jp/vue/nuxt3/

https://nuxt.com/docs/getting-started/routing