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>

Author

Hey, I'm Md Obydullah. I build open-source projects and write on Laravel, Linux server, modern JavaScript and more on web development. If you enjoy my content, please consider supporting what I do!

Follow Buy me a coffeeBuy me a coffee

Leave a Reply

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