by Sai gowtham

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:

Users.vue
<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.

Users.vue
<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.

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

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
130,921 students enrolled
21 hours of video content
View Course