nuxtjs项目如何添加404页面

404页面对于一个网站来说有着重要的作用，用来提醒用户打开的页面不存在，从而跳转到首页或者其他页面引导用户继续访问。

对于nuxtjs的项目要如何设置404页面呢

其实也很简单，只需要在layouts文件夹下新建一个error.vue的文件，文件内通过代码重定向首页就能实现一个友好的404页面，更好的体验就是有一个5秒的倒计时，这样对用户来说不用面对着一个静态页面还需要手动点击跳转。

当然倒计时可以通过setInterval来实现，每隔一秒加1,5秒后跳转，当然前提是需要判断在浏览器端，是否在浏览器端可以通过process.client可以实现。

<template>
  <div class="not-found">
    <img src="@/assets/img/404.png" alt="" width="100%">
    <div class="msg">抱歉，你访问的页面不存在</div>
    <div class="seconds">{{seconds}}秒后将跳转改成首页</div>
  </div>
</template>
<script>
export default {
data(){
  return {
    seconds: 5
  }
},
 mounted() {
    // 判断是否在客户端
    if (process.client) {
      setInterval(() =>{
        this.seconds = this.seconds - 1
        if(this.seconds == 0) {
          location.href = '/'
        }
      },1000)
    }
 }
}
</script>
<style scoped lang="less">
.not-found{
  background: #fff;
  height: 100%;
  padding-bottom: 200px;
  .msg,.seconds{
    text-align: center;
  }
  
}
</style>

上述方法只适用于页面404的情况，也就是如果你访问了一个项目中不存的页面地址，那个nuxt会自动加载error页面，但是对于接口报404或者500的情况此时这种情况就无法实现了，如果接口报500那么nuxt会加载一个默认的server page页面，这个页面样式时错乱的，用户体验不太好。

那么对于接口报错的情况也需要显示error页面要如何实现呢，其实也是可以的，首先需要在拿到接口数据前不要对请求进行拦截，也就在拿到asyncData里面的请求结果后通过code或者其他自定义字段来判断需要显示错误页面，在调用asyncData中的error方法即可，注意error方法需要传入参数,如果没有参数传空即可，这个时候就可以实现接口报错显示错误页面了，当然你也可以针对不对的错误定制不同的错误页面。

async asyncData({ $axios, route, error }) {
    let [detail] = await Promise.all([getDetailApi(route.params.id)])

    if (detail.code === 1) {
      error({ statusCode: 404, message: 'Post not found' })
      return false;
    }
    return {
      detailData: detail.data.result,
      currPage: route.params.id,
    };
  },

本文章由javascript技术分享原创和收集