Nuxt Js로 사용자 정의 오류 페이지를 추가하는 방법

오류 페이지는 Nuxt Js 애플리케이션에 추가하는 것이 매우 중요하며 구현이 매우 간단하고 쉽습니다. 본질적으로 필요한 것은 레이아웃 폴더 안에 있는 "error.vue"파일이고 코드는 다음과 같아야 합니다.

오류 템플릿

<template>
  <div>
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else-if="error.statusCode === 500">Internal Server error</h1>
    <h1 v-else>An error occurred</h1>
    <NuxtLink to="/">Home page</NuxtLink>
  </div>
</template>

<script>
  export default {
    props: ['error'],
    // layout: 'error' // you can set a custom layout for the error page
  }
</script>

위 코드의 이름은 "error.vue"로 지정해야 하며 이것은 Nuxt가 설정한 특수 템플릿이며 오류가 있는 prop을 이름으로 허용합니다. 사용 가능한 속성에 대해 자세히 알아보려면 콘솔에서 오류 개체를 기록하거나 Nuxt Error Page section 문서를 참조하십시오.