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.