如何在Vue Router中使用多个逗号分隔的路由参数？

我希望配置一个可接收可选参数x和y的路由，两个参数都支持多值。我遇到的问题是，Vue Router似乎只能将以/分隔的实际路由片段提取为route.params数组中的单个项：

// 单个路由参数的情况
path: '/route/:x*'

// 当URL为 '/route/foo/bar' 时，route.params 结果为：
['foo', 'bar']

// 但如果URL是 '/route/foo,bar'，结果则是：
['foo, bar']

类似地，通过router.push({ name: 'route', params: { collection: ['foo', 'bar'] }})导航到该路由时，生成的路由仍会使用斜杠而非逗号分隔。

理想情况下，路由模式类似：
path: '/route/:x*/:y*'
其中x和y均为可选参数，可通过前缀区分，例如：

path: 'route/:x(foo_.*)?/:y(bar_.*)?'

此时，以下URL都会路由到同一位置：

• /route
• /route/foo_123
• /route/foo_123,foo_456
• /route/foo_123/bar_123
• /route/bar_123

并且Router会返回如下格式的参数：

params: {
   x: ['foo_123', ...],
   y: ['bar_456', ...]
}

我尝试了Vue Router文档中提到的几种自定义正则表达式方法，但文档并未提供多可选路由参数的示例。

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