Next.js调用router.push时如何实现数组查询参数逗号拼接URL

可以实现，无需修改router.push的核心调用逻辑，自定义路由实例的查询参数序列化、解析规则即可达成效果。

首先你贴的示例调用代码存在语法错误：router.push的location入参里，query是单个配置对象，不能拆成两个平级属性传递，合法的基础传参结构如下：

// 错误写法，语法不合法
// router.push({ query: { list: [...arr] }, { list2: [...arr2] }})

// 正确基础传参格式
router.push({
  query: {
    list: [...arr],
    list2: [...arr2]
  }
})

Vue Router（v3、v4版本逻辑一致）默认内置的查询参数序列化规则，会把数组类型参数处理为key=val1&key=val2的重复键格式。要改成单键+逗号拼接值的格式，只需要初始化路由实例时，覆盖默认的stringifyQuery（负责把参数对象序列化为URL查询串）、parseQuery（负责把URL查询串解析回参数对象）两个配置项即可。

Vue Router 4（适配Vue3）配置示例 #

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [/* 你的业务路由表 */],
  // 自定义：参数对象转URL查询串
  stringifyQuery(query) {
    const searchParams = new URLSearchParams()
    for (const key in query) {
      const value = query[key]
      if (value === null || value === undefined) continue
      // 数组值用逗号拼接为单个字符串
      if (Array.isArray(value)) {
        searchParams.append(key, value.join(','))
        continue
      }
      searchParams.append(key, value)
    }
    const queryString = searchParams.toString()
    return queryString ? `?${queryString}` : ''
  },
  // 自定义：URL查询串转参数对象，和序列化规则对齐
  parseQuery(search) {
    const params = new URLSearchParams(search)
    const query = {}
    for (const [key, value] of params) {
      // 检测到值包含逗号就拆回数组，保证业务代码读取query时格式和传入时一致
      query[key] = value.includes(',') ? value.split(',') : value
    }
    return query
  }
})

Vue Router 3（适配Vue2）配置说明 #

v3版本配置逻辑完全相同，仅路由初始化方式为new Router({/* 配置项 */})，把上述两个自定义方法传入配置即可。

格式说明 #

你给出的期望URL示例中用?分隔两个查询参数不符合通用URL规范：标准URL规则下，查询段的第一个参数前加?，后续参数之间用&分隔。上述配置生成的是符合规范的list=listitem1,listitem2&list2=list2item1,list2item2,list2item3格式。如果一定要使用?分隔参数（极不推荐，会导致所有通用URL解析工具无法正确识别参数），只需修改stringifyQuery里的拼接逻辑，把默认的&连接符替换为?即可。

配置完成后，正常调用router.push传入数组类型的query参数，就会生成逗号拼接格式的URL，同时组件内通过route.query读取参数时，拿到的依然是和传入格式一致的数组，不会影响现有业务逻辑。

内容的提问来源于stack exchange，提问作者wrath