Vue 3 中如何用 Vue Router 配置带任意顺序多动态参数的动态路由

你之前尝试的所有通配符配置失效，本质是两个核心原因：

• 用的全是Vue Router 3（适配Vue2版本）的旧语法，Vue Router 4 对路径匹配规则做了不向下兼容的调整，直接在路径里写*会触发配置报错、或匹配规则失效导致路径被截断
• 大概率把/products的无参数精确路由和带筛选参数的通配路由拆成了两个独立配置，由于Vue Router的匹配优先级是精确路径 > 带动态参数的路径，访问带参数的URL时会直接命中无参数的/products路由，最终$route.params拿不到任何值

正确的路由配置写法 #

针对你需要的「路径参数成对出现、顺序任意、个数不固定、不使用查询参数」的场景，不需要拆分多套路由，用Vue Router 4 官方支持的命名参数+重复匹配修饰符的写法，一套配置覆盖所有你列出的URL形式：

const routes = [
  {
    // 这个配置会同时匹配：
    // /products、/products/color/red、/products/size/36/brand/myBrand 等所有形式
    path: '/products/:catchAll(.*)*',
    // 按你原有的逻辑动态导入Products视图即可
    component: () => import('@/views/Products.vue'),
    name: 'ProductsPage'
  }
]

配置里的两个核心规则要注意：

• catchAll是自定义的命名参数名，你换成params、pathSegments都可以
• 括号里的(.*)是单段路径的匹配正则，后面的*修饰符表示这个参数可以重复匹配任意次数（包括0次），也就是能承接路径下所有剩余的路径段

参数解析逻辑 #

路由匹配成功后，所有捕获的路径段会自动以数组形式存在$route.params.catchAll里，不需要手动切割URL：

• 访问纯/products路径时：catchAll是空数组
• 访问/products/color/red路径时：catchAll值为['color', 'red']
• 访问/products/size/36/brand/myBrand/color/green路径时：catchAll值为['size', '36', 'brand', 'myBrand', 'color', 'green']

你只需要在Products组件里加一段简单的成对转换逻辑，就能把数组转成可用的筛选条件键值对：

import { useRoute } from 'vue-router'
const route = useRoute()
// 把捕获的路径段数组转成筛选对象
const getFilterMap = () => {
  const segments = route.params.catchAll || []
  const filter = {}
  // 按两个一组循环，第0位当键，第1位当值
  for (let i = 0; i < segments.length; i += 2) {
    const key = segments[i]
    const value = segments[i + 1]
    if (key && value) {
      filter[key] = value
    }
  }
  return filter
}

适配全量500+视图的动态路由方案 #

如果你的目标是不用逐个在路由文件里配置所有视图，可以在路由列表的最后位置加一个全局兜底路由（注意路由匹配是从上到下执行的，兜底路由必须放在所有固定路由后面，不然会拦截正常路径），实现按路径动态加载对应组件：

const routes = [
  // 先放需要特殊配置的固定路由（比如登录页、公共页这些）
  {
    path: '/login',
    component: () => import('@/views/Login.vue')
  },
  // 全局动态兜底路由
  {
    path: '/:viewPath(.*)*',
    // 根据捕获的路径段，动态拼接视图文件路径实现按需加载
    component: () => {
      const pathSegments = route.params.viewPath
      // 举个映射规则：路径为/user/list 时，加载 @/views/user/list.vue
      const viewComponentPath = `/src/views/${pathSegments.join('/')}.vue`
      return defineAsyncComponent(() => import(viewComponentPath))
    }
  },
  // 最后放404路由
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('@/views/404.vue')
  }
]

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