从 RefundDetails 页面跳转到 RefundList 页面并传递参数

本文档介绍了在 Vue.js 应用程序中从 RefundDetails 页面跳转到 RefundList 页面并传递参数 refundId 的方法，并提供了解决参数传递问题和查询数据的解决方案。

问题描述

您需要从文件 RefundDetails 跳转到文件 RefundList 的页面，并按照文件 RefundDetails 中传回的 refundId 查询文件 RefundList 的表，但是跳转到文件 RefundList 后，调用了查询方法，refundId 为 null。这可能是因为参数传递出现问题。

解决方案

以下是解决此问题的步骤：

1. 在 RefundList 文件中获取参数

   在 RefundList 文件中，添加一个 created 生命周期钩子函数，使用 this.$route.params 获取传递过来的参数。

   created() {
     const refundId = this.$route.params.RefundList;
     console.log('refundId:', refundId);
     // 调用查询方法并使用 refundId 进行查询
   }
   

2. 确认路由配置

   确保 RefundList 组件已经在路由中正确注册，并且在路由配置中设置了 name 属性为 "RefundList"。

   {
     path: '/refund-list',
     name: 'RefundList',
     component: RefundList
   }
   

3. 检查传递的参数

   在 RefundDetails 文件中，确认 refundInfo.refund.refundId 的值不为 null 或 undefined。可以在点击按钮时打印该值，确保它的值是正确的。

   console.log('refundInfo.refund.refundId:', refundInfo.refund.refundId);
   

通过以上步骤，您应该能够成功将 refundId 传递给 RefundList 组件，并使用该值进行查询。如果问题仍然存在，请检查路由配置和参数传递的方式是否正确。