nuxt.js写项目时增加错误提示页面操作 nuxt.js写项目时增加错误提示页

为项目增加错误提示页面，比如后端接口没有数据或接口报错的时候，如果不增加错误提示页面的话，那接口报错的信息就会在页面中显示，这显然不利于用户体验。
实际操作过程中，可能因为各种原因无法显示正确的返回页面，比如本身这篇文章的id不存在，或者网络请求问题，这时候就需要一个错误展示页用来提示用户；
nuxt.js官方也有错误提示页面的写法：传送门-> 官方错误提示页面的写法
此项目中的错误提示页面是放在layouts目录中：

文章图片

layouts中的error.vue页面内容为：

.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; }

在页面组件中是在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:====", 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，第二个参数为赋值对象；
如果请求错误，则直接将对象为参数，包括 statusCode 错误代码以及 message 错误信息，以便处理不同的错误信息展示；
最终效果如下：

文章图片

补充知识：Nuxt的错误页面和个性meta设置
当用户输入路由错误的时候，我们需要给他一个明确的指引，所以说在应用程序开发中404页面时必不可少的。Nuxt.js支持直接再默认布局文件夹里建立错误页面。
建立错误页面
【nuxt.js写项目时增加错误提示页面操作】在根目录下的layouts文件夹下建立一个error.vue文件，它相当于一个显示应用错误的组件。