如何从/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:[e-mail]">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:[e-mail]">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:[e-mail]">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:[e-mail]">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布局不会自动发生。相反，重定向应该在应用程序的相关挂钩或方法中进行。这是通过调用Nuxt上下文中可用的error方法来完成的，其中传递了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' })
}
}
}

Answer 2

作为@aDiscuit答案的补充：

对于那些希望重定向到组件中asyncData以外的其他上下文中的错误页面的用户，可以访问this.$nuxt.error中的error函数。