将对象传递给 URL 搜索参数

Question

我想将此对象传递给 url 搜索参数：

const obj = {
 mb_brand: car.base,
 mb_factor: car.factor,
 mb_type: car.type
}

我有设置参数的功能：

const setQuery = (key, value) => {
        let obj_url = new URL(window.location.href);
        let params = obj_url.searchParams;
        params.set(key, value);

        Router.push({
            pathname: obj_url.pathname,
            search: obj_url.search
        });
    }

到目前为止我尝试的是：

for(let i = 0 ; i < Object.keys(obj).length ; i++){
   setQuery(Object.keys(obj)[i], Object.values(obj)[i])
}

但它只是设置了 1 个参数而不是 3 个。

const obj = {
  mb_brand: 'blah',
  mb_factor: 'blah',
  mb_type: 'blah'
}


const setQuery = (key, value) => {
  let obj_url = new URL(window.location.href);
  let params = obj_url.searchParams;
  params.set(key, value);

  /*Router.push({
      pathname: obj_url.pathname,
      search: obj_url.search
  });*/

  console.log(obj_url.search)
}


for (let i = 0; i < Object.keys(obj).length; i++) {
  setQuery(Object.keys(obj)[i], Object.values(obj)[i])
}

但它只设置了最后一个参数。

我想在 url 上看到这个结果：

localhost/index?mb_brand=blah&mb_factor=blah&?mb_type=blah

Answer 1

您可以直接从对象构建搜索参数：

const obj = {
  mb_brand: 'blah',
  mb_factor: 'blah',
  mb_type: 'blah'
}

console.log(window.location.href.split('?')[0] + '?' + new URLSearchParams(obj))