#Nuxt.js 错误页示例

Nuxt.js提供了一个很有趣的方式来实现错误页：使用layout组件来替代page组件创建错误页。

详细步骤：

• 1). 在layouts目录下创建一个error.vue文件
• 2). error.vue参考代码：

<template>
  <div>
    <h1 v-if="error.statusCode === 404">啊呀，页面找不到了呢</h1>
    <h1 v-else>天啦撸，粗错啦！</h1>
    <h2>错误码: {{error.statusCode}}</h2>
    <h2>错误消息: {{error.message}}</h2> 

    <NuxtLink to="/">返回首页</NuxtLink>
  </div>
</template>

<script>
  export default {
    layout: 'error', // you can set a custom layout for the error page
    props: {
      error:{
        type: Object,
        required: true
      }
    },
  }
</script>

• 3). 错误截图
  

参考：https://nuxtjs.org/docs/concepts/views/#error-page