nuxt.jsプロジェクトを書く時、エラーメッセージページの操作を追加します。

プロジェクトのためにエラーメッセージページを追加します。バックエンドインターフェースにデータやインターフェースのエラーがない場合、エラーメッセージページを追加しないと、インターフェースのエラーメッセージがページに表示されます。これは明らかにユーザー体験に不利です。
実際の操作過程では、様々な原因で正確な戻りページが表示できないかもしれません。例えば、自分のこの文章のIDが存在しないか、あるいはネット上の要求問題がある場合、エラー表示ページが必要です。
nuxt.js公式ページにもエラーメッセージがあります。
このプロジェクトのエラーメッセージページはラyoutsディレクトリにあります。

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のcalbackはnuxt.jsの2.3.3 Xバージョンで廃棄されました。運行項目はいつも提示されています。
Callback-based asyncdata，fetch or middleware cals are deprecated.Please switch to promises or async/await sntax
googleで発見されたnuxt.jsの作者はcalbackが何の役にも立たないと感じて、削除しました。
github issueリンク：公式エラーメッセージページの書き方
したがって、ドキュメントを見ると、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要求時にパラメータcalbackを追加します。正しい要求があれば、calbackの最初のパラメータは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で誤ったタイプを判断します。注意しなければならないのはこのエラーの時に「script」で声明しなければなりません。
個性的なメタ設定
ページのMetaはSEOの設定にとって非常に重要です。例えば、今はニュースページを作りたいです。検索エンジンはニュースの収録に対して、各ページはニュースに対して異なるtitleとmetaの設定が必要です。ヘッド情報はヘッドメソッドで直接設定すればいいです。
私たちは今、New-1というページを個性的なmetaと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/uid.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>

注意：コンポーネントの中のメタタグが親コンポーネントの同じラベルを正しくカバーできないように重複する現象を避けるために、hidキーを使ってmetaタグに一意の識別番号を付けることを提案します。

以上のnuxt.jsはプロジェクトを書く時誤りを増加してページの操作にヒントを与えます。つまり、小編集は皆さんに全部の内容を共有します。