Nuxt.js如何配置404页面呢？

其实Nuxt.js 404有两种情况

官方文档

• 当前路由找不到对应页面--->404
• 有对应页面，但是内容不存在---> 404

第一种情况，比如说我们访问一个https://www.sunofbeach.net/xxx，这个页面不存在，所以要显示404

第二种情况，比如说我们访问一个https://www.sunofbeach.net/a/xxx，这个页面存在，但是对应的xxx这篇文章不存在。

这个时候，也是要显示404页面

创建页面

在layout目录下创建error.vue，也就是layout/error.vue

<template>
  <div id="404">
    <div class="header">
      <h1>页面丢了...呜呜！</h1>
    </div>
    <div class="w3-main">
      <div class="agile-info">
        <h2>404</h2>
        <h3>哦不!</h3>
        <p>对不起，找不到页面了.</p>
        <a href="https://www.sunofbeach.net">返回</a>
      </div>
    </div>
  </div>
</template>

样式我就不贴出来了，自己各写各的404页面就好，放在layout目录下

页面效果：

访问：

这种就是第一种情况，访问不存在的页面，则直接跳转到了error.vue页面。

访问存在的页面不存在的资源

前面我们访问的是不存在的页面，接下来我们访问一下存在的页面，但是不存在的资源。

先做一下处理

async asyncData({params, error, redirect}) {
      let [wenda, comment] = await Promise.all([
        api.getWendaDetail(params.id),
        api.getWendaAnswerList(params.id, 1)
      ]);
      if (wenda.code === 10000) {
        return {
          wendaDetail: wenda.data,
          commentList: comment.data
        };
      } else {
        return redirect('/404');
      }
    }

当我们访问的是localhost:3000/qa/23412341xxx时，最后面这穿数字其实是问答的id，如果这个id不存在，拿不到，结果为失败的，我们跳转到/404，而404不存在，所以就跳转到错误页面啦！

这里的参数params,error,redirect可以参考这篇文章

nuxt.js asyncData参数有哪些？