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

課題を持った人

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

筆者

できますよ！解説します。

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

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

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

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

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

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404" class="error-message">
      リクエストされたURLは存在しません
    </h1>
    <h1 v-else class="error-message">
      エラーが発生しました
    </h1>
    <nuxt-link class="btn" to="/">
      トップページへ戻る
    </nuxt-link>
  </div>
</template>

<style lang="sass" scoped>
.error-message
  text-align: center
  font-size: 1.4em
  margin-bottom: 1em
.btn
  display: table
  margin: 0 auto
  background-color: #222
  color: #fff
  padding: .5em 1.5em
</style>

<script>
export default {
  props: {
    error: {
      type: Object,
      default: null
    }
  },
  layout: 'blog'
}
</script>

リクエストされたURLは存在しません

</h1>

エラーが発生しました

</h1>

<nuxt-link class="btn" to="/">

トップページへ戻る

</nuxt-link>

</div>

</template>

.error-message

text-align: center

font-size: 1.4em

margin-bottom: 1em

.btn

display: table

margin: 0 auto

background-color: #222

color: #fff

padding: .5em 1.5em

</style>

export default {

props: {

error: {

type: Object,

default: null

}

layout: 'blog'

}

</script>

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

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

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

router: {

extendRoutes(routes, resolve) {

routes.push({

name: 'notFound',

path: '*',

component: resolve(__dirname, 'pages/index.vue')

})

}

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

筆者

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