如何在 Vue.js 中传递 $router.push 中的数组？

Question

我想通过 VUE 的功能将数据传递到单击按钮的新页面。我尝试使用路由器方法做这件事，但我无法发送数组，它只是允许我用它发送一个字符串。this.$router.push({    name: "SalesInvoice",    params: { SalesInvoice: this.stockmaster }  });这件事不起作用，因为 stockmaster 是一个数组。this.$router.push({    name: "SalesInvoice",    params: { SalesInvoice: "abc" }  });我对字符串做了同样的事情，它奏效了。那么有什么方法可以使用 vue 方法将数组发送到下一页。

Answer 1

只需添加我的评论作为答案，以便其他人将来可以轻松获得它。

当您尝试将数组、对象或对象数组传递给路由器时，您应该首先stringify使用您的数据JSON.stringify并将其传递给路由器。然后您可以访问它并将其解析回JSONwith JSON.parse。对于上述特殊情况，应执行以下操作

this.$router.push({

    name: "SalesInvoice",

    params: { SalesInvoice: JSON.stringify(this.stockmaster) }

  });

Answer 2

作为参考，我不建议使用JSONas URL 参数，而是使用query参数。如果要将数据从一个请求发送到下一个请求，通常使用查询参数而不是路由参数。

在您的情况下，将代码更改为

this.$router.push({

    name: "SalesInvoice",

    query: { SalesInvoice: "abc" }

  });

然后，您可以将您的路线定义更改为这样的

{

  path: 'sales-invoice', 

  name: 'SalesInvoice',

}

看，路径中没有更多:SalesInvoice内容了。不再需要路由参数，因为您现在通过查询参数将数据提供给新路由。您可以使用任意数量的查询参数（实际上是 URL 允许的最大长度），而无需在路由定义中定义它们。这为您提供了更大的灵活性。

您可以使用类似于访问路由参数的查询参数this.$route.query.SalesInvoice。