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布局不会自动发生。而是应在应用程序的相关挂钩或方法中完成重定向。这是通过调用error和statusCode道具调用Nuxt context中可用的message方法来完成的，这将用layout/error.vue的内容替换页面并响应HTTP状态作为statusCode道具提供。

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

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

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

1 个答案: