How to Get Query Parameters from a URL in Vue.js

Detecting the query string parameters in Vue.js is quite simple. Let’s discuss it together and find a perfect solution in this tutorial. You can get the query string parameter simply using Vue.js route.

Let’s discuss the following example. Consider you have this path:

https://w3docs.com?test=yay

In the given URL the key is test and the value is yay.

Inside the Vue component, you can access the query params by using the key like this:

//from your component console.log(this.$route.query.test) // outputs 'yay'

Query parameters

Query parameters are added at the end of the URL with a question mark (?) which is itself followed by the key-value pairs. Query parameters are URL extensions used to define specific content or actions which are based on the data that are being passed.


Do you find this helpful?

Related articles