Nuxt.jsでページを作成・追加する方法｜Nuxt.jsの基本
開発環境
Nuxt.jsについての詳しい説明や、開発環境の作り方は過去に記事にしているので、そちらをご覧ください。
ページ追加の仕組み
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>
