一、介绍
在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>
3、在出现404、500等应用错误时,会自动跳转error.vue,并传递错误信息
报错页面:
<template>
<div>
<!-- 调用一个存在点击事件 -->
<div @click="click()">
这是个错误按钮1
</div>
<!-- 调用一个并不存在的方法,会自动跳转 error.vue -->
<div @click="click2()">
这是个错误按钮2
</div>
<!-- 跳转一个并不存在的路由地址,会404 ,自动跳转 error.vue -->
<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>
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 {
...
}
})
error.vue
<template>
<div>
<!-- 展示传递过来的错误信息 -->
{{ error.message ? error.message : '抱歉,当前页面好像起飞了,可尝试进行刷新或返回首页' }}
</div>
</template>
<script>
export default {
name: 'TestError',
props: {
// 通过props接受错误页面传递的错误信息
error: {
type: Object,
required: true
}
}
}
</script>
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: '页面起飞了' })
}
},
在error.vue
页面中,依旧是通过props
中的error
对象来获取,传递过去的错误信息,与this.$nuxt.error()
一致。