How do I use props with router-link in Vue 3?

How do I use props with router-link in Vue 3?

In Vue 3, you can pass props to a component using the router-link by utilizing the :to prop. You can define an object with the route name and the props you want to pass.

Can you show me an example of that?

Sure! Here's an example:

<router-link :to="{ name: 'User', params: { id: userId } }">User Profile</router-link>

In this case, userId is a variable that holds the ID of the user you want to pass as a prop.

What if I want to pass multiple props?

You can pass multiple props by including them in the params object. For example:

<router-link :to="{ name: 'User', params: { id: userId, role: userRole } }">User Profile</router-link>

Thanks! Is there anything else I should know?

Just remember to define the props in your target component and use props: true in your route definition to receive them.