JavaScript

Nuxt.js|存在しないURLのリクエストがあった時の処理

課題を持った人
課題を持った人
Nuxt.jsで存在しないURLのリクエストがあった時、初期の状態だとデフォルトのエラーページが表示されますが、例えば、オリジナルのエラーページを表示したり、トップページにリダイレクトしたいと思っています。実現することはできますか?
筆者
筆者
できますよ!解説します。

存在しないURLのリクエストがあった時にオリジナルのエラーページを表示する

オリジナルのエラーページを表示する場合の手順は以下です。

  1. layoutsディレクトリ直下にerror.vueを作成する
  2. error.vueでオリジナルのエラーページをデザインする

エラーページは例えば、以下のように作ると良いでしょう。「error.statusCode === 404」の場合は、「リクエストされたURLは存在しません」というメッセージが表示され、それ以外の場合は「エラーが発生しました」と表示されます。

存在しないURLのリクエストがあった時にトップページを表示する

存在しないURLのリクエストがあった時にトップページを表示するには、nuxt.config.jsのrouterオプションにextendRoutesを設定します。

pathプロパティの値を’*’にすることで、pagesに存在しないページは全て、componentプロパティで指定しているpages/index.vueを表示するようにしています。

筆者
筆者
以上、存在しないURLのリクエストがあった時の処理方法についてでした。