【ブログサイト開発其の5】
ページの作成方法

  • 【ブログサイト開発其の5】
    ページの作成方法

    Nuxt

    目次

    こんにちは〜！

    前回は、

    • ・トップページの編集
    • ・ページのレイアウトを設定するdefault.vueへ共通パーツヘッダー、フッターのコンポーネント作成・読み込み
    • ・vueファイル内でのcss設定
    • ・画像パスの読み込み注意点

    などを行いました！

    現時点でトップページの雛形、cssでのレイアウト、画像表示ができているかと思います。

    今回はトップページ以外の下層ページ作成方法についてを書いていきたいと思います！

    それではスタートです！

    その前に、コンポーネントについて

    前回はヘッダー、フッターをコンポーネント化しました。
    このコンポーネント化はヘッダー、フッターだけではなく、よく使うパーツをコンポーネント化するのがベターです。

    例えば、ボタンはトップページで使用しますし、下層ページでも使用することもあるかと思います。

    その際、都度都度vueファイルにボタンのコードを記述すると、ソースが肥大化しますので、ボタンもコンポーネント化するのがよいです。

    私の場合は、以下のようにボタンコンポーネントを作成し、

    <!-- components/Btn.vue -->
<template>
 <div :class="{ 'l-btn': containerClass }">
  <nuxt-link :to="to" class="m-btn" :data-width="dataWidth">
   <slot></slot>
  </nuxt-link>
 </div>
</template>
<script>
export default {
 name: 'BtnBase',
 props: {
  to: {
   type: String,
   default: '',
  },
  dataWidth: {
   type: String,
   default: '',
  },
  containerClass: {
   type: Boolean,
   default: true,
  },
 },
}
</script>


    以下のように各ページで読み込んで使用しています。

    <!-- pages/index.vue -->
<template>
 <btn to="/">ボタンコンポーネント</btn>
</template>

    このようにして、「よく使うパーツはコンポーネント化し各ページで読み込ませる」ということをしたほうが、
    保守しやすくなります！

    なので、ヘッダー、フッターだけではなく、ボタンやリンクをコンポーネント化して、運用しやすいようにしておきましょう！

    下層ページの作成方法

    さて、下層ページを作る方法ですが、pagesディレクトリにvueファイルを作成することで、ページが生成されるようになりますので、
    pagesディレクトリにvueファイルを作成していきます。

    私の場合、自己紹介ページ「intorduce」が下層ページになりますので、以下のようにファイルを作成します。

    pages
     |_intorduce
       |_index.vue

    ファイルを作成したら、自分の作成したい下層ページの内容をどんどん記述していきましょう！

    また、他の下層ページも同様の作成方法で作れますので、他のページが必要であれば作成してみてください。

    ルーティング

    Vueであればページを複数作成する場合、本来「ルーティング」という設定をする必要があります。

    これは、ページ遷移した際にどのページファイル（vueファイル）を使用するか、というのを設定するものですが、
    Nuxt.jsの場合はこの設定をしなくても自動的にルーティングを行なってくれます。

    今はあまり意識しなくてもよいですが、時間がある際は以下の公式サイトで内容を確認してみてください。

    参考
    ファイルシステムに基づくルーティング

    エラーページの作成

    存在しないページへのアクセスをした場合、基本はエラーページを表示するかと思います。
    404、notfoundなどですね。

    Nuxtはこれらのページも簡単に作成できますので、次はエラーページを作成していきたいと思います。

    error.vueの作成

    今回存在しないページへのアクセスをした場合、error.vueを表示させるようにしたいので、
    layoutsディレクトリにerror.vueファイルを作成します。

    layouts
     |_default.vue
     |_error.vue

    error.vueを作成したら、ファイル内にエラーの際の表示を記述していってください。

    例えば、以下のようにエラーだよ！と分かるようにするのと、TOPへ戻るボタンを配置するとかでもよいです。

    <!-- layouts/error.vue -->
<template>
 <h1>Page Not Found</h1>
 <Btn to="/">TOPへ戻る</Btn>
</template>

    これで、存在しない存在URLにアクセスすると、error.vueが表示されると思います。
    これでエラーページの作成は完成です。

    リダイレクトの設定

    今回私は使用していませんが、上記のようにエラーページではなく、任意のページにリダイレクトさせることも可能です。

    その場合は、nuxt.config.jsファイルのrouterオブジェクトにextendRoutesを追加し、
    リダイレクトさせる記述を行います。

    // nuxt.config.js
router: {
 extendRoutes(routes, resolve) { //ページが存在しない場合のリダイレクトの設定
  routes.push({
   name: 'notfound',
   path: '*',
   component: resolve(__dirname, 'pages/index.vue')
  })
 }
}

    上記のように記述することで、エラーページに飛ばすのではなく、任意のページにリダイレクトさせることができます。

    エラーページのgenerate設定

    Nuxtで静的ファイルを出力する際に、npm run generateをしますが、初期設定だとlayouts/error.vueは200.htmlとして出力されます。

    ホスティング先で変わるとは思いますが、この200.htmlを404.htmlにしたい場合は、nuxt.config.jsで設定することで変更できます。

    // nuxt.config.js
generate: {
 fallback: true,
}

    このように、generateオブジェクトのfallbackをtrueにするこで、404ページのアドレスを404.htmlに変更することができます。

    また、以下のように任意のファイル名に変更することも可能です。

    // nuxt.config.js
generate: {
 fallback: 'error.html', // エラーページとして、error.htmlが出力される。
}

    次回

    今回は、

    • ・下層ページの作成
    • ・エラーページの作成
    • ・npm run generate時のエラーページの出力方法

    を書いていきました。

    また、今回はnuxt.config.jsに設定を書いていきました。
    nuxt.config.jsには今後Nuxtの設定を書いていくことが多くなります。

    現時点でトップページや下層ページが作成できましたが、meta系の設定もできるようになっていたほうがSEOにもいいですので、次回はmeta周りのvueファイル内やnuxt.config.jsでの設定方法を書いていこうと思います！

    それでは次回もゆたしく〜〜

    記事一覧に戻る

記事をシェアする