如何在 url 中附加多个查询参数 - NuxtJS

Question

我正在创建一个 nuxt 电子商务应用程序。我有一种情况，我在一个类别中有超过 10,000 个项目，我想为产品创建相关过滤器。 我的问题是如何附加 url（添加和删除查询参数）以便过滤产品。 我已经通过添加change 事件来尝试这样的事情！

      <ul>
        <li>
          <b-form-checkbox @change="filterProduct">
            <label class="ui__label_checkbox">Apple</label>
          </b-form-checkbox>
        </li>
         <li >
          <b-form-checkbox @change="filterProduct">
            <label class="ui__label_checkbox">Mango</label>
          </b-form-checkbox>
        </li>
      </ul>

methods:{
  filterProduct() {
      this.$router.push({ query: Object.assign({}, this.$route.query, { random: "query" }) });

    },
}

这种方法确实只附加一次网址，但会删除我不想要的复选框的选中状态

我希望每次单击复选框时都类似于下面，它必须同时保留复选框的状态附加到 url

www.foobar.com/?first=1&second=12&third=5

Answer 1

这是你应该做的。首先，你应该把你所有的过滤器都写在data()

data() {
    return {
        filter: {
            first: this.$route.query.first || null,
            second: this.$route.query.second || null,
            third: this.$route.query.third || null
        }
    }
}

然后您设置一个观察器，当任何过滤器更改时触发，显然您需要将 <template> 中的输入 v-model 到 data() 中的字段

watch() {
    filter: {
        handler(newFilters) {
            const q = complexToQueryString({
                ...this.filter,
            })

            const path = `${this.$route.path}?${q}`
            this.$router.push(path)
        }
    }
}

complexToQueryString 函数是我的一个东西，它从查询中删除空值，也适用于数组过滤器。我这样做是因为我的 API 将 null 读取为 String 'null'。

const complexToQueryString = (object, parentNode = null) => {
    const query = Object.entries(object).map((item) => {
        const key = parentNode ? `${parentNode}[${item[0]}]` : item[0]
        const value = item[1]

        if (Array.isArray(value)) {
            return arrayToQueryString(value, key)
        } else if (value instanceof Object) {
            return complexToQueryString(value, key)
        } else if (item[1] !== undefined) {
            return [
                Array.isArray(item[0]) ? `${key}[]` : key,
                encodeURIComponent(item[1]),
            ].join('=')
        }

        return ''
    })
        .filter(empty => empty)
        .join('&')

    return query
}

现在它应该可以工作了，如果您更改过滤器值，那么 data.filter.first 会更改值，这会触发观察器，从而更新 URL。

这种方法最好的一点是，现在您可以复制和粘贴 URL，并且过滤器完全相同并返回相同的结果。

Answer 2

您的方法几乎是正确的，除了页面请求，路由器级别您应该​​将所有查询参数附加到路由参数。

然后将这些参数分配给您的过滤器页面中的数据，并对它们进行变异，同时更新查询，就像您现在正在做的那样。这样，您将更新查询，并且复选框不会丢失状态，因为它们将依赖于数据，而不是参数。

routes: [{
        path: '/path',
        component: Component,
        props: (route) => ({
            filter1: route.query.filter1,
            filter2: route.query.filter2,
            filter3: route.query.filter3
        })
    }]