Categories
Vue Answers

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

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *