JS批量设置URL search params仅最后一个生效的解决方法

setQuery每次执行都会重新读取当前页面的原始URL创建全新实例，不会保留上一次循环写入的参数，同时每次调用都触发路由跳转，连续多次路由跳转只会执行最后一次，最终只保留最后设置的单个参数。
循环执行的实际流程：

• 第一次调用：基于无参数的原始URL，仅写入mb_brand，触发第一次路由跳转
• 第二次调用：再次读取未更新的原始无参URL，仅写入mb_factor，触发第二次跳转覆盖上一次路由操作
• 第三次调用：同样读取原始无参URL，仅写入mb_type，触发第三次跳转，最终URL只剩最后一个参数

直接利用原生URLSearchParams一次性批量构造所有参数，仅触发一次路由跳转即可，代码如下：

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

const setBatchQuery = (paramsMap) => {
  const targetUrl = new URL(window.location.href)
  // 批量写入所有参数
  Object.entries(paramsMap).forEach(([key, value]) => {
    // 可自行加判断过滤null、undefined等无效值
    targetUrl.searchParams.set(key, value)
  })
  // 所有参数处理完成后只做一次路由跳转
  Router.push({
    pathname: targetUrl.pathname,
    search: targetUrl.search
  })
}

// 直接传入对象调用即可
setBatchQuery(obj)

如果要保留原有单参数设置的逻辑，可把参数修改和路由跳转拆分，不要每次设置单个参数就触发跳转：

// 先初始化唯一的URL实例
const currentUrl = new URL(window.location.href)
const searchParams = currentUrl.searchParams

// 单参数设置函数仅修改参数，不触发跳转
const setQuery = (key, value) => {
  searchParams.set(key, value)
}

// 循环遍历对象完成所有参数设置
Object.entries(obj).forEach(([key, value]) => setQuery(key, value))

// 所有参数设置完成后统一跳转一次
Router.push({
  pathname: currentUrl.pathname,
  search: currentUrl.search
})

提示：如果参数存在数组、对象类型的值，需要先通过JSON.stringify做序列化，否则会被默认转成[object Object]；如果不需要保留URL上原有参数，可以在批量设置前清空所有旧参数。

内容的提问来源于stack exchange，提问作者Jack The Baker