404エラーページと

404のエラーページはNuxtで非常に簡単です、しかし、私は私が私自身を書くことに決めたハウツーガイドを見つけるのに十分長くかかりました.

カスタム404エラーページ

デフォルトのNuxtエラーページは、おそらく既に見たことがあります.

カスタムエラーページを書き込むには、ファイルlayouts/error.vueを作成します.以下に例を示します.

<template>
  <section>
    <h1>404 Page not Found</h1>
  </section>
</template>

error pagesの文書とdefault error pageのソースコードを参考にしてください.

404リダイレクトする

上記のルートはうまく動作しませんが、プログラムから別のページから404ページにリダイレクトしたい場合もあります.
私の個人的なサイトVueからのこの例では、404-error-page-and-redirect-with-nuxt.mdファイルが記事を表示するために存在するかどうかチェックします.マークダウンファイルが見つからない場合、ユーザーは404ページにリダイレクトされます.
これを達成するために、私はerrorフックでasyncData機能を輸入します.サーバがファイルをerror({ statusCode: 404 })で404ページに転送できない場合.

export default {
  \\ ...
  async asyncData ({ params, error }) {
    try {
      return await require(`~/writing/${params.slug}.md`)
    } catch (e) {
      error({ statusCode: 404, message: 'Article not found' })
    }
  },
  \\ ...
}

参照としてasyncDataにHandling Errorsのドキュメントを使用します.