Md Obydullah Follow I'm Md Obydullah. I build open-source projects and write about Laravel, Linux server, modern JavaScript and web development.

Passing and Accessing Query Parameters in Vue.js

Published on December 25, 2019 33 sec read

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>

You're welcome to suggest any article to write!

Md Obydullah Follow I'm Md Obydullah. I build open-source projects and write about Laravel, Linux server, modern JavaScript and web development.

Leave a Reply

Your email address will not be published. Required fields are marked *