在nuxt.js項(xiàng)目中如何增加錯(cuò)誤提示頁面

<template>
<div class="err_wrap">
<h2 class="error" v-if="error.statusCode === 404">頁面不存在或沒有數(shù)據(jù)</h2>
<h2 class="error" v-else>應(yīng)用發(fā)生錯(cuò)誤異常</h2>
<nuxt-link class="to_home" to="/">返回首頁</nuxt-link>
</div>
</template>

<script>
export default {
props: ['error'],
layout: 'detail',
data() {
return {
msg: '未找到相應(yīng)頁面或沒有數(shù)據(jù)'
}
}
}
</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>

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: '頁面未找到或沒有數(shù)據(jù)！' }) //當(dāng)接口無數(shù)據(jù)或接口出錯(cuò)時(shí)會(huì)執(zhí)行這句代碼跳轉(zhuǎn)到錯(cuò)誤提示頁面
 }
 },

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: '頁面未找到或無數(shù)據(jù)' }))
  context.error({ statusCode: 404, message: '頁面未找到或無數(shù)據(jù)' }) //修改成這樣就可以跳到錯(cuò)誤提示頁面
 }
 },

<template>
 <div class="error">
  <h3 v-if="error.statusCode == 404">404 - 頁面不存在</h3>
  <h3 v-else>500 - 服務(wù)器錯(cuò)誤</h3> 
  <ul> 
   <!-- 這里用來提示返回到主頁 -->
   <li><nuxt-link to="/">HOME</nuxt-link></li> 
  </ul>
 </div>
</template>
<script>
export default {
 props: ['error']
}
</script>

<template>
 <div>
  <h3>News Index page</h3>
  <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:'我是新聞標(biāo)題'}}">News-1</nuxt-link></li>
  </ul>
 </div>
</template>
 
<script>
export default {
 
}
</script>

<template>
 <div>
  <h3>News-Content [{{$route.params.id}}]</h3>
  <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,
 }
 },
//獨(dú)立設(shè)置head信息
 head(){
  return{
  title:this.title,
  meta:[
   {hid:'description',name:'news',content:'This is news page'}
  ]
  }
 }
}
</script>