如何在Vue中使用Vue-Router设置数组类型URL查询参数

先给你梳理几种常见数组查询参数格式的实现方法，你可以对应自己预期的格式来选：

1. 生成重复参数格式（?ids=1&ids=2&ids=3） #

这是Vue-Router的默认行为，不管是3.x还是4.x版本，直接在路由跳转时传数组类型的query参数就行：

// 示例代码
this.$router.push({
  path: '/your-target-page',
  query: {
    ids: [1, 2, 3] // 直接传入数组
  }
})

如果这个默认行为没生效，你可以检查下路由配置里有没有自定义parseQuery或stringifyQuery方法，把它们恢复默认逻辑就行。

2. 生成PHP风格数组格式（?ids[]=1&ids[]=2&ids[]=3） #

这种格式需要自定义路由的stringifyQuery方法来处理数组参数，创建路由实例时这么配置：

// Vue-Router 4.x 示例
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [/* 你的路由配置 */],
  stringifyQuery(query) {
    const parts = []
    for (const key in query) {
      if (query[key] == null) continue
      const value = query[key]
      if (Array.isArray(value)) {
        // 给数组参数加上[]后缀
        value.forEach(item => {
          parts.push(`${encodeURIComponent(key)}[]=${encodeURIComponent(item)}`)
        })
      } else {
        parts.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
      }
    }
    return parts.length ? '?' + parts.join('&') : ''
  }
})

之后再传数组ids: [1,2,3]，就会生成符合要求的URL格式。

3. 生成逗号分隔字符串格式（?ids=1,2,3） #

这种需要手动把数组转成逗号分隔的字符串再传入query：

this.$router.push({
  path: '/your-target-page',
  query: {
    ids: [1,2,3].join(',') // 数组转字符串
  }
})

如果需要在接收参数时转回数组，在路由组件里用this.$route.query.ids?.split(',')处理即可。

4. 生成JSON字符串格式（?ids=[1,2,3]） #

同样手动转成JSON字符串传入：

this.$router.push({
  path: '/your-target-page',
  query: {
    ids: JSON.stringify([1,2,3])
  }
})

接收时用JSON.parse(this.$route.query.ids)转回数组即可，注意要处理解析失败的异常情况。

要是你现在的代码生成的URL还是不对，可以把你的HTML/JS代码贴出来，我帮你精准调整~

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