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

Posted 2023-02-22

【中文标题】如何使用 vue 路由器将道具传递到 nuxt 错误页面？

【英文标题】：How to pass props to nuxt error page with vue router?

【发布时间】：2021-12-16 13:17:42

【问题描述】：

我有一个 nuxt s-s-r 应用程序，我正在使用 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

【问题讨论】：

你能用回复样本更新你的问题吗？

【参考方案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'，上述代码将起作用。

【参考方案2】：

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

【讨论】：

谢谢你的回答，萌。您能否展示支持您的主张的文档或源代码？我想查看文档或源代码，以显示使用 router.push 作为从页面组件到布局组件 (/layouts/error.ts) 的重定向时如何丢失道具数据。如果您可以用文档或源代码支持您的主张，我会接受您的回答。

在解释这个问题之前，我会建议另一种将消息传递到错误页面的解决方案：而不是使用 router.push ，您可以使用函数 this.$nuxt.error （在组合中，函数错误在context , 可以作为 setup(props, error ) 的参数访问) this.$nuxt.error( statusCode: 404, message: error.response.data) 如果你在 chrome 上使用 Vue 调试，你可以看到错误页面是 Nuxt 组件的子组件。这意味着 Error 的道具是从 Nuxt 传递的。使用 router.push 时，Nuxt 无法理解您的消息，但出现功能错误，它可以。希望我们能为这种情况找到最好的解决方案