In this tutorial, we are going to learn how to pass and access query parameters in Vue.js.

Assume a link with parameter:

http://localhost:8080/product?curreny=bdt

At the end of the URL, query parameters are added. In this URL ?curreny=bdt is the query parameter. Currency is the key and bdt is the value.

Pass Query Parameter

From script tag, we can pass query using this.$router.push()method like this:

this.$router.push({path:'/product',query:{curreny:'bdt'}});

From template part, we can pass query from router-link like this:

<router-link :to="{path:'/product',query:{currency:'bdt'}}">Link</router-link>

Access Query Parameter

From script tag, we can access query parameter like this:

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

From template part, we can access query parameter like this:

<div>The currency: {{$route.query.currency}}</div>