Javascript 将对象作为查询字符串参数传递

我想将搜索查询字符串传递给状态。 URL应如下所示：

/goods?filters[paramA]=1&filters[paramB]=2

<a ui-sref="goods({ filters: { paramA: 1, paramB: 2}})">Menu item label</a>

我的状态设置如下所示：

.state('goods', {
            url:        '/goods?filters',
            …
        })

我的链接模板如下所示：

/goods?filters[paramA]=1&filters[paramB]=2

<a ui-sref="goods({ filters: { paramA: 1, paramB: 2}})">Menu item label</a>

---

如何正确地执行此操作？

为了实现您想要的功能，您需要使用的是查询字符串，而不是试图使用的查询字符串。（虽然可以使用查询字符串，但使用$stateParams更容易）

首先，您需要将参数分配/注册到以下状态：

$stateProvider
.state('someState', {
    url: "/someLinkPath/:Param1",
    templateUrl: 'stateHTML.html',
    controller: function ($stateParams) {
        console.log($stateParams);
    }
});

然后，您可以构造$stateParams对象并将其在链接中传递到所需的状态

如果确实需要使用查询字符串，则需要展平添加到字符串中的对象

您可以使用$.param（jQuery）：

或者编写自己的vanilla JS函数，如下所示：

function toQueryString(obj) {
    var parts = [];
    for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
            parts.push(encodeURIComponent(i) + "=" + encodeURIComponent(obj[i]));
        }
    }
    return parts.join("&");
}

编辑：进一步考虑您的问题后，我认为问题在于您的参数周围有一个对象包装器。使用此选项时：

<a ui-sref="goods({ filters: { paramA: 1, paramB: 2}})">Menu item label</a>

菜单项标签

我认为，通过这样做，ui sref不知道如何处理带有子对象的对象（过滤器）。您需要做的是传入一个对象，我认为如果您可以将代码更改为只传入params作为对象，那么您的代码将起作用

<a ui-sref="goods({ paramA: 1, paramB: 2})">Menu item label</a>

菜单项标签

我需要一个查询字符串，因为它是一个带有许多参数的搜索表单。我知道$.param（），但我也找不到通过ui sref传递查询字符串的方法。这个问题可以通过序列化搜索参数数组并将其作为单个参数传递来解决，尽管我正在寻找一种更简洁的方法。如果像这样从ui sref中删除过滤器会发生什么：ui sref=“goods（{paramA:1，paramB:2}）”它根本不留下任何查询字符串。到目前为止，我已经用丑陋的JSON-as-a-parameter解决了这个问题。这不太好，但至少可读性好，而且很容易操作。