如何在 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传递给路由器。然后您可以访问它并将其解析JSON回JSON.parse. 对于上面的特殊情况，应该执行以下操作

this.$router.push({
    name: "SalesInvoice",
    params: { SalesInvoice: JSON.stringify(this.stockmaster) }
  });

Answer 2

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

根据您的情况，将代码更改为

this.$router.push({
    name: "SalesInvoice",
    query: { SalesInvoice: "abc" }
  });

然后您可以将路线定义更改为如下所示

{
  path: 'sales-invoice', 
  name: 'SalesInvoice',
}

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

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