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

【问题标题】：How do I pass Array in $router.push in Vue.js?如何在 Vue.js 中传递 $router.push 中的数组？
【发布时间】：2020-04-24 22:14:08
【问题描述】：

我想通过 VUE 的功能将数据传递到单击按钮的新页面。我尝试使用路由器方法做这件事，但我无法发送数组，它只是允许我用它发送一个字符串。

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

这东西不起作用，因为 stockmaster 是一个数组。

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

我对字符串做的同样的事情，它奏效了。那么有没有办法使用vue方法将数组发送到下一页。

【问题讨论】：

尝试发送 JSON.stringify(this.stockmaster) 然后在任何你想得到的地方解析它
我们该怎么做呢？你能用代码指导我吗？
this.$router.push({ name: "SalesInvoice", params: { SalesInvoice: JSON.stringify(this.stockmaster ) } });。也请阅读JSON.stringify
感谢您的帮助。
@MuhammadUsman 你真是个摇滚人，非常感谢。

【解决方案1】：

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

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

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

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

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

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：