Vue router query parameters tutorial

In this tutorial, we are going to learn about how to use query parameters in the Vue router.

Query parameters

Query parameters are added at the end of a url using a question mark(?) followed by the key-value pairs.

localhost:8080/users?name=sai

// In this url key is name and  value is sai

Query parameters help us to filter the data.

Let’s see an example of how to pass query parameters to the vue routes.

Passing query params

We can pass query params as an object to the route-link component using :to prop.

<router-link :to="{path:'/users',query:{name:'sai'}}">
   User Sai
</router-link>

In programatic navigation, we can pass query params using this.$router.push() method.

this.$router.push({path:'/users',query:{name:'sai'}});

Accessing query params data

To access the query params data inside vue components we need to use the $route object.

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

Inside component <script> tag we need to use this.$route instead of $route.

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

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