如何在 Nuxt 中使用 404 页面组件到当前 url

Question

在我的 nuxt 项目中，我的 pages 文件夹中有以下结构：

index.vue
tools
   index.vue
   _id.vue
page-not-found.vue

在我的 nuxt 配置中，我在路由器部分有这个：

router: {
        extendRoutes(routes, resolve) {
            routes.push(
                {
                    name: '404',
                    path: '*',
                    component: resolve(__dirname, 'pages/page-not-found.vue')
                },
            )
        },
    }

当我登陆我的页面文件夹以外的 url 时，我显示了 url 和我的 404 组件（例如：my-domaine/other-path 显示 404 内容）。所以我想要的是我的路线tools-id 我想获取数据取决于参数id，如果有数据，我会显示带有详细信息的页面，但如果我没有数据，我希望有与我相同的行为404路；比如，在我的网址中，我有 my-domaine/tools/parameter_value，但我的网页显示 404 内容。

Answer 1

查看 Nuxt 文档以了解错误页面：https://nuxtjs.org/docs/concepts/views/#error-page。

您可以创建一个名为error.vue 的布局文件，该文件用作您网站中所有错误页面的基础。从该布局中，您可以引用适当的错误组件。例如：

<template>
    <div>
        <NuxtLink to="/">Home page</NuxtLink>
        <PageNotFound v-if="error.statusCode === 404" :message="error.message" />
    </div>
</template>

<script>
    export default {
        props: ['error'],
        layout: 'error'
    }
</script>

Vue 会在无效路由上自动渲染错误页面的内容。您还可以通过调用context.error() 方法以编程方式打开错误页面。例如：

asyncData ({ params, error }) {
    return axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
        return { title: res.data.title }
    })
    .catch((e) => {
        error({ statusCode: 404, message: 'Post not found' })
    })
}

如果您在 asyncData 或 fetch 方法中使用 error 函数，那么您可以像我在上面的答案中显示的那样访问它，否则在 Vue 实例中定义的任何其他方法中您可以访问通过this.error()

export default {
    data: {...},
    methods: {
        validateRoute() {
            if (404) { 
                this.error({statusCode: 404, message: "Page not found"})
            }
        },

        axiosRequest() {
            try {
                const response = await axios.get('...');
                return response;
            } catch(err) {
                this.error({statusCode: 404, message: err.message });
            }
        }
    }
}