# Nuxt.jsでページを作成・追加する方法｜Nuxt.jsの基本

URL: https://webrandum.net/nuxt-page/
公開日: 2022-02-25
更新日: 2022-02-25
カテゴリー: コーディング
タグ: Nuxt.js
出典: Webrandum（著者: サイトウ マサカズ）

## 開発環境

Nuxt.jsについての詳しい説明や、開発環境の作り方は[過去に記事](https://webrandum.net/nuxt-setup/)にしているので、そちらをご覧ください。

[Nuxt.jsの基本と最初のセットアップ「プロジェクトの作成と起動をするまでの流れ」](https://webrandum.net/nuxt-setup)

## ページ追加の仕組み

Nuxt.jsではVue Routerを自分で設定する必要はなく、「pages」ディレクトリの構造がそのままURLになります。

| フォルダパス | URL |
| --- | --- |

| pages/index.vue | ./ |
| --- | --- |

| pages/about.vue | ./about |
| --- | --- |

| pages/member/list.vue | ./member/list |
| --- | --- |

| pages/contact/index.vue | ./contact |
| --- | --- |

「index.vue」の場合はフォルダ直下のパスになります。

ファイル名がそのままURLになるので、修正するときにどのページのファイルを触ればいいかが分かりやすくなっています。

### コンテンツの出し分けをしたいページの場合

例えば、お知らせ詳細ページやメンバー詳細ページなどは、固有の「news」「member」ではなく、「news/記事ごとのIDやパーマリンク」「member/メンバーごとのID」としないといけません。

その場合はファイルパスを「news/_id.vue」や「member/_id.vue」のようにすればOKです。

`_`以降の名前は自動的にプロパティ名と認識して、自動的に`params`へ代入してくれます。

## 404ページを作成したい

### 固定のページに遷移させる

`nuxt.config.js`の`router`で下記のように存在しないパスにアクセスした場合はすべて特定のページに遷移させられます。

```
router: {
  extendRoutes (routes, resolve) {
    routes.push({
      name: 'custom',
      path: '*',
      component: resolve(__dirname, 'pages/404.vue')
    })
  }
}
```

あとは「404.vue」を作成しておけばOKです。

ただし、この方法だと「news/_id.vue」など`_id`部分が可変になっている場合は「_id.vue」が優先して表示されてしまいます。

### エラーが発生した場合はすべて同じレイアウトで表示させる

「pages」ではなく、「layouts」フォルダに「layouts/error.vue」としてエラーレイアウトを用意しておくことで、エラーが発生した場合はそのページに遷移させられます。

実際に利用するのはこの方法の方が基本になりそうです。

この方法であれば、「news/_id.vue」など`_id`部分が可変になっているページでも、その`id`を使ってAPIに問い合わせてエラーが返ってくると自動で「layouts/error.vue」のエラーレイアウトが表示されます。

```
<template>
  <div class="container">
    <h1>{{ error.statusCode }}</h1>
    <p v-if="error.statusCode === 404">
      ページが見つかりません
    </p>
    <p v-else>
      エラーが発生しました
    </p>
  </div>
</template>
<script>
export default {
  props: {
    error: {
      type: Object,
      default: null
    }
  }
}
</script>
```