Nuxt.js 中定制 error.vue 错误缺省页

一、介绍

在Nuxt.js项目中，当接口报错或后台数据返回异常时，前端展示就会呈现接口报错的信息，这会给用户非常不好的体验。所以当出现404、500等应用错误时，我们可以在项目的根目录下创建layouts文件夹，然后在该文件夹下创建error.vue文件，创建后该文件就是Nuxt.js默认的错误缺省页，当出现404、500等应用错误时就会自动跳转到该error.vue页面，或者根据接口结果进行手动跳转。同时我们可以通过修改该文件的布局和样式，以及接收出错页传递进来的报错信息，来定制化项目错误页面。
但要注意的是该文件虽然是在layouts文件夹下，但这并不是一个布局文件或组件，而是一个完整的页面（page）。

二、基本使用

1、创建layouts文件夹，并创建error.vue错误缺省页

2、定制化error.vue页，根据报错页面传递的错误信息进行相应处理

<template>
  <div>
  
    {{ error.message ? error.message : '抱歉，当前页面好像起飞了，可尝试进行刷新或返回首页' }}
  div>
template>

<script>
export default {
  name: 'TestError',
  props: {
   // 接受错误页面传递的错误信息
    error: {
      type: Object,
      required: true
    }
  },
  mounted () {
    console.log(this.error)
  },
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3、在出现404、500等应用错误时，会自动跳转error.vue，并传递错误信息

报错页面：

<template>
  <div>
  
  	<div @click="click()">
      这是个错误按钮1
    div>
  	
    <div @click="click2()">
      这是个错误按钮2
    div>
    
    <nuxt-link to="/eee/error">
      这是个错误的路由地址
    nuxt-link>
  div>
template>
<script>
export default {
  name: 'IndexPage',
  created () {
   // 当接口报错500时，会自动跳转error.vue
    const res = await this.$axios.get(api.lesson.info, {
        params: {
          lessonId: courseId
        }
      })
  },
  methods: {
     click () {
     // 在点击事件中调用一个不存在的方法  也会自动跳转error.vue
      console.log(this.getList())
    }
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

4、根据某些状态，如后端接口的返回值，自主决定是否进入error.vue

报错页面：

this.$axios.get(api.getCourseInfo.url + '?lessonId=' + Number(this.$route.params.id)).then((res) => {
        ...
        // 接口本身没有报错 http状态码为 200
        // 根据接口返回值的 code状态 决定是否进入错误页
        if (res.code === 201) {
          // 通过调用 this.$nuxt.error() 进入错误页 
          // 可以通过参数传递错误信息
          this.$nuxt.error(res.result))
        } else {
		  ...
		}
      })
1
2
3
4
5
6
7
8
9
10
11
12

error.vue

<template>
  <div>
  
    {{ error.message ? error.message : '抱歉，当前页面好像起飞了，可尝试进行刷新或返回首页' }}
  div>
template>

<script>
export default {
  name: 'TestError',
  props: {
   // 通过props接受错误页面传递的错误信息
    error: {
      type: Object,
      required: true
    }
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

5、在asyncData中可通过content.error()跳转到错误页面

asyncData(context) {
 try {
  let paramsWorksList = {
  	id: context.params.id
  }
  let WorksDetail = await context.$axios.post(`/anchor/worksList`, paramsWorksList)
 } catch (error) {
  // 修改成这样就可以跳到错误提示页面 并传递错误信息
  context.error({ statusCode: 404, message: '页面起飞了' }) 
 }
},
1
2
3
4
5
6
7
8
9
10
11

在error.vue页面中，依旧是通过props中的error对象来获取，传递过去的错误信息，与this.$nuxt.error()一致。

三、理解尚浅，后续补充