nuxt.js 항목 작성 시 오류 알림 페이지 작업 추가

프로젝트 에 오류 알림 페이지 를 추가 합 니 다.예 를 들 어 백 엔 드 인터페이스 에 데이터 가 없 거나 인터페이스 가 잘못 되 었 을 때 오류 알림 페이지 를 추가 하지 않 으 면 인터페이스 가 잘못된 정 보 를 페이지 에 표시 합 니 다.이것 은 사용자 체험 에 불리 합 니 다.
실제 작업 과정 에서 여러 가지 이유 로 정확 한 반환 페이지 를 표시 할 수 없습니다.예 를 들 어 이 글 의 id 가 존재 하지 않 거나 네트워크 요청 문제 가 있 을 수 있 습 니 다.이 럴 때 오류 표시 페이지 가 사용 자 를 알려 야 합 니 다.
nuxt.js 공식 적 으로 도 잘못된 알림 페이지 의 작성 방법 이 있 습 니 다:전송 문->공식 오류 알림 페이지 작성 방법
이 항목 의 오류 알림 페이지 는 layouts 디 렉 터 리 에 놓 여 있 습 니 다.

layouts 의 error.vue 페이지 내용 은:

<template>
<div class="err_wrap">
<h1 class="error" v-if="error.statusCode === 404">          </h1>
<h1 class="error" v-else>        </h1>
<nuxt-link class="to_home" to="/">    </nuxt-link>
</div>
</template>

<script>
export default {
props: ['error'],
layout: 'detail',
data() {
return {
msg: '            '
}
}
}
</script>

<style scoped>
.err_wrap {
padding: 0.2rem 0.4rem;
text-align: center;
}
.error {
font-size: 0.32rem;
text-align: center;
padding-top: 55%;
color: #582c1a;
padding-bottom: 0.4rem;
}
.to_home {
font-size: 0.3rem;
color: #582c1a;
display: inline-block;
padding-bottom: 3.9rem;
}
</style>

페이지 구성 요소 에 서 는 asyncData catch 에 적 혀 있 습 니 다.인터페이스 호출 이 잘못 되 거나 데이터 가 없 을 때 오류 알림 페이지 로 이동 합 니 다.

async asyncData(context, callback) {
 try {
  // console.log("_id id:====", context.params.id)
 
  let paramsWorksList = {
  id: context.params.id
  }
  let WorksDetail = await context.$axios.post(`/anchor/worksList`, paramsWorksList)
  // console.log("WorksDetail:=====", WorksDetail.data.data[0])
 
  return {
  WorksDetail: WorksDetail.data.data[0]
  }
 } catch (err) {
  console.log("errConsole========:", err)
  callback({ statusCode: 404, message: '          ！' }) //                            
 }
 },

여기 구덩이 가 있 습 니 다.asyncData 의 callback 은 nuxt.js 의 2.3.X 버 전에 서 폐기 되 었 습 니 다.실행 항목 은 항상 알림 입 니 다.
Callback-based asyncData, fetch or middleware calls are deprecated. Please switch to promises or async/await syntax
구 글 을 통 해 발 견 된 nuxt.js 의 작 가 는 콜 백 이 소 용이 없다 고 생각 하여 지 워 졌 다.
github issue 링크:https://github.com/nuxt/nuxt.js/issues/4158
따라서 문 서 를 보면 error 의 속성 은 context 라 는 매개 변수 에 있 습 니 다.페이지 구성 요소 의 코드 는 다음 과 같 습 니 다.

async asyncData(context) {
 try {
  // console.log("_id id:====", context.params.id)
 
  let paramsWorksList = {
  id: context.params.id
  }
  let WorksDetail = await context.$axios.post(`/anchor/worksList`, paramsWorksList)
  // console.log("WorksDetail:=====", WorksDetail.data.data[0])
 
  return {
  WorksDetail: WorksDetail.data.data[0]
  }
 } catch (error) {
  console.log("errConsole========:", context.error({ statusCode: 404, message: '         ' }))
  context.error({ statusCode: 404, message: '         ' }) //                
 }
 },

asyncData 요청 시 인자 callback 을 추가 합 니 다.요청 이 정확 하 다 면 callback 의 첫 번 째 매개 변 수 는 null 이 고 두 번 째 매개 변 수 는 할당 대상 입 니 다.
요청 이 잘못 되면 status Code 오류 코드 와 message 오류 정 보 를 포함 하여 서로 다른 오류 정 보 를 처리 할 수 있 도록 대상 을 매개 변수 로 합 니 다.
최종 효 과 는 다음 과 같다.

Nuxt 오류 페이지 와 개성 meta 설정
사용자 가 루트 를 잘못 입력 했 을 때,우 리 는 그 에 게 명확 한 안 내 를 해 야 하기 때문에 응용 프로그램 개발 에서 404 페이지 를 입력 할 때 없어 서 는 안 된다.Nuxt.js 는 기본 레이아웃 폴 더 에 오류 페이지 를 만 드 는 것 을 지원 합 니 다.
오류 페이지 만 들 기
루트 디 렉 터 리 에 있 는 layouts 폴 더 아래 에 error.vue 파일 을 만 듭 니 다.잘못된 구성 요 소 를 표시 하 는 것 과 같 습 니 다.

<template>
 <div class="error">
  <h2 v-if="error.statusCode == 404">404 -      </h2>
  <h2 v-else>500 -      </h2> 
  <ul> 
   <!--             -->
   <li><nuxt-link to="/">HOME</nuxt-link></li> 
  </ul>
 </div>
</template>
<script>
export default {
 props: ['error']
}
</script>

코드 는 v-if 로 오류 유형 을 판단 합 니 다.이 오류 가 발생 했 을 때에서 설명 해 야 합 니 다.
개성 메타 설정
페이지 의 Meta 는 SEO 설정 에 매우 중요 합 니 다.예 를 들 어 지금 뉴스 페이지 를 만 들 려 면 검색엔진 이 뉴스 에 대한 수록 을 위해 모든 페이지 가 뉴스 에 대해 서로 다른 title 과 meta 설정 을 해 야 합 니 다.현재 페이지 의 머리 정 보 를 헤드 방법 으로 직접 설정 하면 됩 니 다.
우 리 는 지금 뉴-1 페이지 를 개성 있 는 메타 와 title 로 설정 해 야 한다.
1.우 리 는 먼저 pages/news/index.vue 페이지 의 링크 를 수정 하여 title 에 전송 합 니 다.뉴스 구체 적 인 페이지 에서 title 을 받 아 글 의 제목 을 만 들 기 위해 서 입 니 다.
/pages/news/index.vue

<template>
 <div>
  <h2>News Index page</h2>
  <p>NewID:{{$route.params.newsId}}</p>
  <ul>
   <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
   <li><nuxt-link :to="{name:'news-id',params:{id:123,title:'我是新闻标题'}}">News-1</nuxt-link></li>
  </ul>
 </div>
</template>
 
<script>
export default {
 
}
</script>

첫 번 째 단계 가 완 료 된 후,우 리 는/pages/news/ 를 수정 합 니 다.id.vue,전달 값 에 따라 독특한 meta 와 title 태그 로 만 듭 니 다.

<template>
 <div>
  <h2>News-Content [{{$route.params.id}}]</h2>
  <ul>
  <li><a href="/" rel="external nofollow" >Home</a></li>
  </ul>
 </div>
</template>
<script>
export default {
 validate ({ params }) {
 // Must be a number
 return /^\d+$/.test(params.id)
 },
 data(){
 return{
  title:this.$route.params.title,
 }
 },
//独立设置head信息
 head(){
  return{
  title:this.title,
  meta:[
   {hid:'description',name:'news',content:'This is news page'}
  ]
  }
 }
}
</script>

메모:구성 요소 의 meta 태그 가 부모 구성 요소 의 같은 탭 을 정확하게 덮어 쓰 지 못 해 중복 되 는 현상 을 피하 기 위해 hid 키 를 이용 하여 meta 태그 에 유일한 표지 번 호 를 설정 하 는 것 을 권장 합 니 다.

이상 의 nuxt.js 가 프로젝트 를 쓸 때 오류 알림 페이지 를 추가 하 는 작업 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.