Vue/Nuxt 404 页面自定义

【问题标题】：Vue/Nuxt 404 Page customizeVue/Nuxt 404 页面自定义
【发布时间】：2021-11-04 17:21:00
【问题描述】：

您好，我正在开发一个 vue/nuxt 网站。我设计了 404 not found 页面。但我不确定当用户键入我找不到的 URL 时如何显示此页面。

【问题讨论】：

【解决方案1】：

您可以只创建一个布局文件 (layouts/error.vue)，它会自动处理错误。在此文件中，您可以决定是只想处理 404 错误还是其他错误。

<template>
  <div>
    <h1 v-if="error.statusCode === 404">
      Not found
    </h1>
    <h1 v-if="error.statusCode !== 404">
      Error
    </h1>
  </div>
</template>

<script>
export default {
  layout: 'default',
  props: {
    error: {
      type: Object,
      required: true
    }
  }
}
</script>

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

【讨论】：