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
經過google發現的,nuxt.js的作者覺得callback沒什麼用,給去掉了。
github issue連結:https://github.com/nuxt/nuxt.js/issues/4158
所以經過檢視文件,error的屬性在context這個引數中,頁面元件中的程式碼如下:
async asyncData(context) { try { // console.log("_id的id:====",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,第二個引數為賦值物件;
如果請求錯誤,則直接將物件為引數,包括 statusCode 錯誤程式碼以及 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設定
頁面的Meta對於SEO的設定非常重要,比如你現在要做個新聞頁面,那為了搜尋搜尋引擎對新聞的收錄,需要每個頁面對新聞都有不同的title和meta設定。直接使用head方法來設定當前頁面的頭部資訊就可以了。
我們現在要把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/_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寫專案時增加錯誤提示頁面操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。