如何从/ 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:[email protected]">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:[email protected]">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:[email protected]">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:[email protected]">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布局不会自动发生。相反，重定向应该在您的应用程序的相关钩子或方法中完成。这是通过调用qxtxswpoi中的error方法来完成的，其中context和statusCode道具通过，它将用message的内容替换页面，并将作为layout/error.vue道具提供HTTP状态。

以下是在statusCode中处理错误的示例：

asyncData