How to get the query parameters from a URL in Vue

In this tutorial, we are going to learn about how to access the query parameters data from a URL in Vue.js.

Consider, we have this following route with query parameters in our vue app.

localhost:3000/users?name="gowtham"

To get the query parameters from an above URL, we can use this.$route.query.paramName inside the vue components.

Example:

<template>
  <div>
    <h1>User</h1>
  </div>
</template>

<script>
export default {
  created() {
    console.log(this.$route.query.name);  }
};
</script>

Inside the vue component template, we can access it like this.

<template>
  <div>
    <h1>User: {{$route.query.name}}</h1>  </div>
</template>

<script>
export default {

};
</script>

If you are passing multiple query parameters to a URL using & operator.

localhost:3000/users?name=gowtham&id=1

You can access it like this.

<template>
  <div>
    <h1>Name: {{$route.query.name}}</h1>    <h1>Id: {{$route.query.id}}</h1>  </div>
</template>