Ownedmedia ウェブ制作に役立つコンテンツを発信中!

Nuxt.js 2020.06.08

Nuxt.jsで404エラーページのルーティングとテンプレートを作成する

Tags: ,,,

Nuxt.jsではウェブアプリケーションの他にも、コーポレートサイトやメディアサイトなどのウェブサイトを作成するのにも便利です。そんな時に必要となることが多い404エラーページですが、専用のページテンプレートを作成する方法をまとめておきたいと思います。

 

まずは404エラーページのテンプレートファイルを作成していきます。場所はpagesディレクトリ配下に設置します。今回は「404.vue」という名前で下記のように作成しています。

【pages/404.vue】

<template>
 <div>
  <h1>Page Not Found</h1>
  <h2>お探しのページが見つかりません</h2>
  <p>
   URLに間違いないか確認し、再度アクセスを試してください。
   また、つながらない場合は時間をおいて再度アクセスしてください。
  </p>
 </div>
</template>

<script></script>

 

これだけでは、404エラー時に先ほど作成したテンプレートが表示されません。続けて「nuxt.config.js」に、404エラー時のルーティングを設定する必要があります。具体的には「router」オプションで下記のように記述します。

【nuxt.config.js】※一部抜粋

export default {
 router: {
  extendRoutes (routes, resolve) {
   routes.push({
    name: '404error',
    path: '*',
    component: resolve('~/pages/404.vue')
   })
  }
 },
 ...........
}

 

extendRoutesメソッドで404エラー時の指定を行います。nameの値には識別できるようなキーワードを、componentには先ほど作成したテンプレートがある場所のパスを記述します。pathにはワイルドカードを指定することで、ルーティングに該当しないURLの場合には全てこのルーティングが実行されるようになっています。これで存在しないURLにアクセスすると、先ほど作成したテンプレートで404エラーページが表示されるようになりました。

 


 

今回はNuxt.jsで404エラーページを作成する方法についてまとめてみました。他にもいくつか方法があるようですが、公式のドキュメントに掲載されているやり方に沿っているので、安心して利用できるのかなと思います。是非試してみてはいかがでしょうか。

 

(参考にさせて頂いたサイト)
API: router プロパティ

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?