Vue Router误将URL参数当作路由名称匹配问题求助

问题场景 #

配置带:id参数的消费者详情子路由后，列表页可正常访问，但访问/consumers/1时抛出错误：

vue-router.mjs:810 Uncaught (in promise) Error: No match for
 {"name":"1","params":{}}

路由配置代码：

export const ConsumerRoutes = [
  {
    path: '/' + import.meta.env.VITE_MODULE_ADMIN_NAME + '/consumers',
    meta: { 
      requiresAuth: true,
      adminLayout: true,
      module: 'admin',
      icon: UserCircleIcon,
      nav: 'Consumers'
    },
    children: [
      {
        path: '',
        name: 'Consumers',
        component: () => import('../../views/admin/Consumer.vue'),
      },
      {
        path: ':id',
        name: 'Consumer Details',
        component: () => import('../../views/admin/ConsumerDetails.vue'),
      }
    ],
  },

  // 尝试拆分路由为独立配置，问题依旧
  // {
  //   path: '/' + import.meta.env.VITE_MODULE_ADMIN_NAME + '/consumers/:id',
  //   meta: { 
  //     requiresAuth: true,
  //     adminLayout: true,
  //     module: 'admin',
  //     excludeFromNav: true
  //   },
  //   children: [
  //     {
  //       path: '',
  //       name: 'Consumer Details',
  //       component: () => import('../../views/admin/ConsumerDetails.vue'),
  //     }
  //   ]
  // }
];

异常特征 #

• 在afterEach钩子中打印目标路由，能看到路由识别了正确的目标，但系统错误地将1当作路由名称匹配
• 临时把路由名称改成1，页面就能正常加载
• 拆分路由为独立配置后问题未解决，后续确认问题与当前路由定义无关

排查方向 #

• 检查跳转逻辑：确认跳转详情页时是否写错了push参数，比如误写为router.push({ name: id })，正确写法应该是router.push({ name: 'Consumer Details', params: { id } })，或者直接传路径字符串
• 检查全局路由守卫：查看beforeEach/beforeResolve等守卫中是否有逻辑错误修改了to对象的name属性，导致参数被覆盖成了路由名称
• 检查路由注册：确认是否在其他地方重复注册了冲突的路由，比如有没有名称为1的路由，或者匹配规则重叠的路由
• 检查Vue Router版本：部分旧版本可能存在参数匹配的bug，尝试升级到最新稳定版

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