Passing and Accessing Query Parameters in Vue.js

Published on December 25, 2019 33 sec read

HIRE US 🖐
We're available to do freelance project. Take a look at our services!

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.

Follow

Leave a Reply

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