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.