问题记录:动态参数未解析成功

直接说结论: name 属性冲突

 {
      path: '/',
      name: 'home',
      component: HomeView,
      children: [

        {
          path: 'home/:id(\\d+)',
          name: 'homeChildA',
          component: () => import('../components/HomeChildA.vue'),
        },

        {
          path: 'home/:userName',
          name: 'homeChildB',
          component: () => import('../components/HomeChildB.vue'),
        },
        {
          path: 'childB',
          name: 'homeChildB',
          component: () => import('../components/HomeChildB.vue'),
        },
      ],
    },

这个示例遇到的情况是,动态参数 123 对应的 A 能够正常解析,但是参数为 aaa 等字符串时,没有正确的被识别为参数,而是当做路径去尝试匹配了,修改静态路由 childB name 属性以后正常工作