先试一下访问一个不存在的内容页面，会显示一个默认的错误页面。

打开内容页面组件， pages/posts/[id]/index.vue，在请求内容数据的下面，可以判断一下 !post.value，如果没有内容数据，可以用一下 Nuxt 框架里提供的 showError 设置一下要显示的错误，提供一个对象，把 statusCode 设置成 404，然后可以再添加一个 message ，对应的值是没找到内容页面。

现在你看到的是 Nuxt 项目里默认的错误页面。

下面我们自己定义一个错误页面。新建一个错误页面，把它放在跟 app 组件同一个目录的下面，名字是 error.vue，先设置一下组件的脚本，在脚本里面用 defineProps ，提供一个对象参数，里面添加一个 error，类型是 Object。

然后再处理一下组件的模板，先用一组 NuxtLayout，里面包装的是一个 div，然后用一组 Head ，里面包装的是 Title，它的值是页面的标题，绑定输出 error.statusCode。

下面再添加一个大标题，一组 h1，里面绑定输出 error.statusCode。 大标题的下面再添加一组 div，用 style 设置一下样式，margin-bottom 设置成 8 像素，font-weight 设置成 bold 。元素里绑定输出的东西，先判断一下 error.message，如果有值，就显示 error.message，如果没有，可以显示 error.statusMessage 。

再添加一组 button 元素，按钮文字是返回首页，绑定 click 事件，执行一下 clearError 清除错误，提供一个对象，把 redirect 设置成 / 。

在浏览器预览一下，访问不存在的内容页面，会显示自定义的错误页面，上面会显示状态码，还有错误信息。点击 返回首页，打开的就是应用的首页。