404 오류 페이지 및 Nuxt로 리디렉션

Nuxt를 사용하면 404 오류 페이지를 쉽게 만들 수 있지만 직접 작성하기로 결정한 하우투 가이드를 찾는 데 시간이 오래 걸렸습니다.

사용자 지정 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에 대한 설명서를 참조로 사용하십시오.