Nuxt.js开发中碰到的问题（四）为博客添加错误提示页

博客原文链接

为博客增加错误展示页面

实际操作过程中，可能因为各种原因无法显示正确的返回页面，比如本身这篇文章的id不存在，或者网络请求问题，这时候就需要一个错误展示页用来提示用户；

Nuxt.js 官方已经提供了错误提示页的写法：

官方错误提示页

编写错误页面

<template>
  <div id="error">
    {{msg}}
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: '未找到相应页面请返回'
    }
  }
}
</script>

<style lang="less" scoped>
#error {
  font-size: 32px;
  text-align: center;
  padding-top: 15%;
}
</style>
复制代码

由于我的博客比较简单，只需要提示找不到页面，所以直接提示即可，情况较多的话可以像官方示例那样，根据错误代码输出不同的提示；

错误页面处理页面直接放在 layouts 文件夹下即可；

展示错误页面

错误请求处理

async asyncData({app, params}, callback) {
  const URL = `请求地址`
  try {
    const res = await app.$axios.get(URL)
    if (res.data.status === 200) {
      callback(null, {
        detail: res.data.data,
        title: res.data.data.title,
        content: res.data.data.content
      })
    } else {
      callback({ statusCode: 404, message: '页面未找到' })
    }
  } catch (err) {
    callback({ statusCode: 404, message: '页面未找到' })
  }
},
复制代码

在 asyncData 请求时添加参数 callback，如果请求正确，则 callback 的第一个参数为 null，第二个参数为赋值对象；

如果请求错误，则直接将对象为参数，包括 statusCode 错误代码以及 message 错误信息，以便处理不同的错误信息展示；

最终效果如下：