Categories
Vue Answers

How to set URL query parameters in Vue.js with Vue Router?

Spread the love

Sometimes, we want to set URL query parameters in Vue.js with Vue Router.

In this article, we’ll look at how to set URL query parameters in Vue.js with Vue Router.

How to set URL query parameters in Vue.js with Vue Router?

To set URL query parameters in Vue.js with Vue Router, we can call $router.push with an object with the query property.

For instance, we write

this.$router.push({ path: 'register', query: { plan: 'private' }})

to call this.$router.push with an object that has the query property set to { plan: 'private' }.

This way, we have the plan query string parameter set to private in the URL we’re navigating to.

Conclusion

To set URL query parameters in Vue.js with Vue Router, we can call $router.push with an object with the query property.

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 *