vuejs: router-link params is empty

Question

I have defined a router-link

<router-link :to="{ path: linkTo + '/' + item.name, params: { id: item.id } }" >{{item.name}}</router-link>

But when I inspect the router-link, the params object is always empty.

What i'm doing wrong? If I just output the id with {{item.id}} i get the number...

This is my route

{ path: '/category/:name', component: Category, props: true, name: 'category', meta: { auth: true } },

gregor

Answer 1

The dynamic segment specified in your route is "name", not the "id". This means your $route.params object doesn't have an "id" property and you can't access it with props in your child component.

You have either to change path in your route to path: '/category/:id' or change your router-link params to params: { name: item.id }. Don't forget to add props: ['id'] (or props: ['name']) in your child component.