route match not working for kebab param names

[stackoverfloweth]

url: http://localhost:5173/walk/zoo

routes

{
    name: 'walk', 
    path: '/walk', 
    component: () => import('../views/Walk.vue'),
    children: createRoutes([
      {
        name: 'walk-my-dogs', 
        path: '/:my-Param',
        component: () => import('../views/DogsList.vue')
      },
      {
        name: 'walk-shelter-dogs', 
        path: 'shelter-dogs',
        component: () => import('../views/DogsList.vue'),
        meta: {
          showShelterDogs: true
        }
      }
    ])
  },

if I change path on walk-my-dogs to

path: '/myParam'

it works fine

[kktos]

At first glance, it doesn't seem a problem, from my point of view. I mean, the param name is a variable name at the end, right ? so it should comply to the same js rules we have for a variable name, don't you think ?

[stackoverfloweth]

At first glance, it doesn't seem a problem, from my point of view. I mean, the param name is a variable name at the end, right ? so it should comply to the same js rules we have for a variable name, don't you think ?

I agree that's it's not a high priority problem but devs coming from vue-router will assume it works this way and it should be relatively easy to convert kebab-case param names into camelCase variable names

[pleek91]

Prob fine if we said they had to be camel case. But I agree it be nice if it just worked either way and wasn't opinionated.

Best case the variable is the same as they defined it. Idk that we should do any conversions on it.