How to add routes with parameters in Vue.js using Vue Router router-link?

Sometimes, we want to add routes with parameters in Vue.js using Vue Router router-link.

In this article, we’ll look at how to add routes with parameters in Vue.js using Vue Router router-link.

How to add routes with parameters in Vue.js using Vue Router router-link?

To add routes with parameters in Vue.js using Vue Router router-link, we can set the to prop to an object with the params property set to an object with the URL parameters.

For instance, we write

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

to add router-link with the to prop set to an object with the params property set to { userId: 123 }

to replace the userId URL parameter placeholder with 123.

name is the name property value that we set when we define the route.

Conclusion

To add routes with parameters in Vue.js using Vue Router router-link, we can set the to prop to an object with the params property set to an object with the URL parameters.