#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> 
&lt;NuxtLink to=&quot;/&quot;&gt;返回首页&lt;/NuxtLink&gt;
</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