nuxt.js寫項(xiàng)目時增加錯誤提示頁面操作

更新時間：2020年11月05日 11:14:26 作者：sunny327

這篇文章主要介紹了nuxt.js寫項(xiàng)目時增加錯誤提示頁面操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

為項(xiàng)目增加錯誤提示頁面，比如后端接口沒有數(shù)據(jù)或接口報錯的時候，如果不增加錯誤提示頁面的話，那接口報錯的信息就會在頁面中顯示，這顯然不利于用戶體驗(yàn)。

實(shí)際操作過程中，可能因?yàn)楦鞣N原因無法顯示正確的返回頁面，比如本身這篇文章的id不存在，或者網(wǎng)絡(luò)請求問題，這時候就需要一個錯誤展示頁用來提示用戶；

nuxt.js官方也有錯誤提示頁面的寫法：傳送門-> 官方錯誤提示頁面的寫法

此項(xiàng)目中的錯誤提示頁面是放在layouts目錄中：

layouts中的error.vue頁面內(nèi)容為：

<template>
<div class="err_wrap">
<h1 class="error" v-if="error.statusCode === 404">頁面不存在或沒有數(shù)據(jù)</h1>
<h1 class="error" v-else>應(yīng)用發(fā)生錯誤異常</h1>
<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>

在頁面組件中是在asyncData的catch中寫的，當(dāng)接口調(diào)用出錯或無數(shù)據(jù)時就會跳轉(zhuǎn)到錯誤提示頁面：

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ù)或接口出錯時會執(zhí)行這句代碼跳轉(zhuǎn)到錯誤提示頁面
 }
 },

這里有一個坑，asyncData的callback在nuxt.js的2.3.X版本給廢棄了，運(yùn)行項(xiàng)目總是提示：

Callback-based asyncData, fetch or middleware calls are deprecated. Please switch to promises or async/await syntax

經(jīng)過google發(fā)現(xiàn)的，nuxt.js的作者覺得callback沒什么用，給去掉了。

github issue鏈接：https://github.com/nuxt/nuxt.js/issues/4158

所以經(jīng)過查看文檔，error的屬性在context這個參數(shù)中，頁面組件中的代碼如下：

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ù)' }) //修改成這樣就可以跳到錯誤提示頁面
 }
 },

在 asyncData 請求時添加參數(shù) callback，如果請求正確，則 callback 的第一個參數(shù)為 null，第二個參數(shù)為賦值對象；

如果請求錯誤，則直接將對象為參數(shù)，包括 statusCode 錯誤代碼以及 message 錯誤信息，以便處理不同的錯誤信息展示；

最終效果如下：

補(bǔ)充知識：Nuxt的錯誤頁面和個性meta設(shè)置

當(dāng)用戶輸入路由錯誤的時候，我們需要給他一個明確的指引，所以說在應(yīng)用程序開發(fā)中404頁面時必不可少的。Nuxt.js支持直接再默認(rèn)布局文件夾里建立錯誤頁面。

建立錯誤頁面

在根目錄下的layouts文件夾下建立一個error.vue文件，它相當(dāng)于一個顯示應(yīng)用錯誤的組件。

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

代碼用v-if進(jìn)行判斷錯誤類型，需要注意的是這個錯誤時你需要在<script>里進(jìn)行聲明的。

個性meta設(shè)置

頁面的Meta對于SEO的設(shè)置非常重要，比如你現(xiàn)在要做個新聞頁面，那為了搜索搜索引擎對新聞的收錄，需要每個頁面對新聞都有不同的title和meta設(shè)置。直接使用head方法來設(shè)置當(dāng)前頁面的頭部信息就可以了。

我們現(xiàn)在要把New-1這個頁面設(shè)置成個性的meta和title。

1.我們先把pages/news/index.vue頁面的鏈接進(jìn)行修改一下，傳入一個title，目的是為了在新聞具體頁面進(jìn)行接收title，形成文章的標(biāo)題。

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

第一步完成后，我們修改/pages/news/_id.vue，讓它根據(jù)傳遞值變成獨(dú)特的meta和title標(biāo)簽。

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

注意：為了避免組件中的meta標(biāo)簽不能正確覆蓋父組件中相同的標(biāo)簽而產(chǎn)生重復(fù)的現(xiàn)象，建議利用hid鍵為meta標(biāo)簽配一個唯一的標(biāo)識編號。