routing with params in vuejs using router-link

Question

I am trying to build a spa using vuejs in which I have a list of users now when I click a user it should route to a new page with user details of the particular user how to params the user id in router-link

Answer 1

You can pass params in router link using

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

Here "name" key parameter defines the name of the route and "params" key defines the parameters you need to send with that route.

If you need to use Route Path instead of Route name, You can use.

<router-link :to="{ path: 'home', params: { userId: 123 }}">Home</router-link>

Reference

Answer 2

Looks like params: {...} doesn't work on non-named routes so to get that working I had to make my links like this:

<router-link :to="'/view-customer/' + customer.ID">

Answer 3

With ES6 template literals:

<router-link :to="`/books/${book.id}`"></router-link>