[Nuxt Vue] Error status跳404页面

用nuxt处理Eroor 404页面的时候不小心踩到一个坑，因为当初几乎用了一整天，整个人陷下去坑里
所以索性就记个笔记，也顺便让其他人不要踩到坑

前言

一个页面发生错误时，应该要显示自製404或Error的页面
而不是显示官方的错误页面

其实在我进公司前，前一个前端工程师有製作一个404页面
但....当初用法完全错误啊！！！！~~~

错误作法(以部落格文章api为例)

输入值

文章编号文章类型

输入完后api的回传值，理应会回传

文章标题文章内容作者名称

如果今天我刻意随便输入一组乱数+英文的文章编号和文章类型

回传状态是200，并且回传三个null栏位
这时前一个工程师的做法是判断文章标题是否等于null
是的话就直接转跳404页面

if(this.aticeTitle == null) return this.$router.push({path:"/404"})

错误原因

api製作时，没有将Error状态码正确的回传(如404、500等)前端接资料时判断是否404页面作法不应该是取决于回传值是否null，这样容易出现bug

正确做法

后端将api正确处理后，会回传Error讯息404或500等状态码

前端处理时使用asyncData()
在画面渲染前先取得资料，并将资料传入相对应的栏位

export default {  asyncData ({ params, error }) {    return axios.get(`https://my-api/posts/${params.id}`)    .then((res) => {      return { title: res.data.title }    })    .catch((e) => {      error({ statusCode: 404, message: 'Post not found' })    })  }}

这边稍微提一下asyncData和fetch的差异
两者很相似，都是在页面(SSR)渲染前执行，但在对处理资料方式不同

asyncData()
可以针对该(component)组件内的data作处理fetch()
可以对store(vuex)内资料作处理

更详细请看这边:nuxt - asyncData & fetch

之后在layouts製作一个error.vue

<template lang="pug">div.page404.bg_half_pink  div.W100    img(src="~/assets/img/icon/f.svg")    h3.f24 找不到页面        img(src="~/assets/img/404-d.png")    h6.f16.f_bold  oops 找不到此连结      a(href="/")            | 首页</template><script>export default {  layout:'error',}</script>

这边要注意layout设定成error

export default {  layout:'error'}

当初用很久就是因为这个Error页面没有设定layout:'error'

所以整个的流程就是
当在asyncData()处理api时
若是报错
error({ statusCode: 404, message: 'Post not found' })

因为在渲染前就拦截到有Eroor 的讯息
所以页面将会自动跳到layout/error.vue
当然可以针对是404或500等状态码做相对应不同的页面处理
这部分可以参考下方参考连结
参考来源:Custom Error Pages with nuxt.js

结语

这应该不太算是教学文
单纯只是记录一下自己踩得坑而已
虽然google大神有蛮多教学(英文QQ)，官方文档其实也有教学
但都觉得没有很清楚(可能我理解能力差XD)
所以自己记录一下
如果有说明错误的话请纠正我
也欢迎大家来讨论