如何使用 vue 路由器将道具传递到 nuxt 错误页面？

Question

我有一个 nuxt SSR 应用程序，我正在使用 axios 发出 HTTP 请求。当我使用 axios 从我的服务器收到错误时，我想将带有 vue 路由器的错误消息作为道具传递给我的错误页面，我已将其设置为 nuxt 详细信息here。

我目前在我的错误布局页面中使用composition API。如何使用 Vue 路由器将错误消息作为道具传递到 /layouts/error.vue 中的错误页面？我试过这样传递道具：

router.push({ path: '/error', name: 'error', params: {error: error.response.data}})

但是错误页面上的props 对象不包含错误数据。如上所述，我的错误页面使用的是组合 API：

import { defineComponent } from '@nuxtjs/composition-api';
export default defineComponent({
  setup(props) {


    return {
    }
  }
})

我试过了：

router.push({ name: 'error', props: { error: error.response.data} });

我已经试过了：

router.push({ path: '/error', props: { error: error.response.data} });

不过，props 在错误组件中没有错误数据 (/layouts/error.ts)

我目前使用的是 nuxt 2.15.7

Answer 1

好的，我有解决问题的方法。但是，该解决方案没有利用 props，因此我不会接受此解决方案作为答案。

错误组件引用props，而不是引用route

import { defineComponent, useRoute } from '@nuxtjs/composition-api';

export default defineComponent({
  layout: 'error',
  setup() {
    const route = useRoute();
    console.log('route', route.value.params.error)
    return {};
  },
});

基于these docs，我们看到：

注意：如果提供了路径，则参数将被忽略，而查询则不是这种情况，如上例所示。相反，您需要 提供路线名称或手动指定整个路径 任何参数：

const userId = '123'
router.push({ name: 'user', params: { userId } }) // -> /user/123

根据这些文档，如果我的代码这样路由到错误组件，我的错误组件应该能够引用来自 route.value.params.error 的错误：

router.push({ name: 'error', params: { error: error.response.data } })

如果我没有在传递给push api 的对象内引用path: '/error'，上述代码将起作用。

Answer 2

当父组件包含子组件时，使用 prop 传递数据。但是，在您的情况下， router.push 只是从该组件重定向到其他组件（布局错误），因此您无法获得道具。 您通过路由参数传递了错误，这不是一个好的解决方案。您需要状态管理来存储来自获取数据的错误