如何定义允许同一路由参数重复n次的路由？能否简化实现？

哈哈，这个问题我太有共鸣了——手动写:id1/:id2/.../:idn不仅麻烦到爆炸，而且完全不灵活，要是n是动态的根本没法搞！其实大部分主流路由库都支持更简洁的方式来实现这个需求，下面分几种常见场景给你讲：

核心思路：用通配符/正则匹配捕获多参数 #

本质上就是让路由规则能匹配任意数量的、用斜杠分隔的同类型参数，然后在组件里把捕获到的字符串分割成数组就行。

1. Vue Router 实现方式 #

Vue Router支持在路由参数里添加正则表达式来限定匹配规则，我们可以用这个特性来匹配多个ID：

const routes = [
  {
    // 匹配 /route/1、/route/1/2、/route/1/2/3... 任意数量的数字ID
    path: '/route/:ids(\\d+(?:/\\d+)*)',
    component: SomeComponent
  }
]

然后在SomeComponent里处理参数：

export default {
  mounted() {
    // 把捕获到的字符串按斜杠分割成ID数组
    const idList = this.$route.params.ids.split('/')
    console.log(idList) // 比如访问/route/1/2/3的话，会得到 ['1','2','3']
  }
}

如果不需要限定ID是数字，也可以简化正则：path: '/route/:ids(.+(/.*)*)'，不过建议还是加上格式验证避免路由冲突。

2. React Router（v6+）实现方式 #

React Router v6里可以用通配符参数或者自定义正则来实现：

方法一：用通配符*

import { Routes, Route, useParams } from 'react-router-dom'

function SomeComponent() {
  const { ids } = useParams()
  // 分割成ID数组，注意开头会有个空字符串，要过滤掉
  const idList = ids.split('/').filter(Boolean)
  return <div>ID列表：{idList.join(', ')}</div>
}

function App() {
  return (
    <Routes>
      {/* 匹配 /route/ 后面任意内容 */}
      <Route path="/route/*" element={<SomeComponent />} />
    </Routes>
  )
}

方法二：用正则参数（进阶）

如果你想严格限定ID的格式（比如只能是数字），可以通过自定义匹配规则实现，不过大部分场景下通配符已经够用，没必要过度复杂。

3. 通用自定义路由场景 #

如果是你自己手写路由逻辑，直接用正则表达式匹配路径即可：

// 比如匹配 /route/ 后面跟着任意数量的数字ID
const routeRegex = /^\/route\/(\d+(?:\/\d+)*)$/
const path = '/route/1/2/3'
const match = path.match(routeRegex)
if (match) {
  const idList = match[1].split('/')
  console.log(idList) // ['1','2','3']
}

注意事项 #

• 路由优先级：这种通配符/正则路由要放在普通路由的后面，不然会优先匹配到它，导致其他路由无法生效。
• 参数验证：尽量给参数加上格式限制（比如只能是数字、字母），避免匹配到不符合预期的路径。
• 空路径处理：如果用户访问/route/（后面没有ID），需要单独处理这种情况，比如重定向或者提示错误。

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