如何从 /pages 重定向到 layouts/error.vue？

Question

我在 layouts 文件夹中创建了一个 error.vue 文件，它应该显示 400、404、410 和 500 错误的 UI。但是，它没有显示我创建的那些，它仍然显示默认的 NuxtServerError 页面。

所以，我的问题是如何在页面中显示我创建的 UI。

下面是我在 layouts/error.vue 中使用的代码

HTML：

<template>
  <div class="error-container">
    <div class="error-content" v-if="error.statusCode === 404">
      <div>
        <h1>Sorry, the page you were looking for doesn't exist.</h1>
        <p>You can return to our <nuxt-link to="/">home page</nuxt-link> or <a href="mailto:contact@web.co">contact</a> us if you can't find what you are looking for.</p>
      </div>
      <img src="~/assets/Images/404.png">
    </div>

    <div class="error-content" v-if="error.statusCode === 400">
      <div>
        <h1>Sorry, the page you are looking for doesn't exist anymore.</h1>
        <p>You can return to our <nuxt-link to="/">home page</nuxt-link> or <a href="mailto:contact@web.co">contact</a> us if you can't find what you are looking for.</p>
      </div>
      <img src="~/assets/Images/404.png">
    </div>

    <div class="error-content" v-if="error.statusCode === 410">
      <div>
        <h1>Sorry, the page you are looking for has been deleted.</h1>
        <p>You can return to our <nuxt-link to="/">home page</nuxt-link> or <a href="mailto:contact@web.co">contact</a> us if you can't find what you are looking for.</p>
      </div>
      <img src="~/assets/Images/404.png">
    </div>

    <div class="error-content" v-if="error.statusCode === 500">
      <div>
        <h1>Sorry, the page you were looking for doesn't exist.</h1>
        <p>You can return to our <nuxt-link to="/">home page</nuxt-link> or <a href="mailto:contact@web.co">contact</a> us if you can't find what you are looking for.</p>
      </div>
      <img src="~/assets/Images/404.png">
    </div>
  </div>  
</template>

Javascript：

<script>
export default {
  head() {
    return {
      title: 'Lost?'
    }
  },
  props: ['error'],
  layout: 'error'
}
</script>

CSS：

<style scoped>
.error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.error-content {
  width: 90%;
  max-width: 800px;
  margin: auto;
  display: grid;
  grid-template: auto / auto 200px;
  grid-column-gap: 10px;
  text-align: center;
}

.error-content > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.error-content > div > h1 {
  font-size: 30px;
  margin: 0;
}

.error-content > img {
  width: 200px;
}

a {
  text-decoration: unset;
  color: var(--color-tpBlue);
}
</style>

提前谢谢了！

Answer 1

重定向到error布局不会自动发生。相反，应该在应用程序的相关钩子或方法中完成重定向。它是通过调用errorNuxt上下文中可用的方法来完成的，statusCode并且message传递的道具，它将用内容替换页面，layout/error.vue并将响应作为statusCode道具提供的 HTTP 状态。

这是处理asyncData内部错误的示例：

export default {
  async asyncData ({ params, error }) {
    try {
      const { data } = await axios.get(`https://my-api/posts/${params.id}`)
      return { title: data.title }
    } catch (e) {
       error({ statusCode: 404, message: 'Post not found' })
    }
  }
}