ItSolutionStuff.com

How to Get Query String Parameters in Vue JS?

By Hardik Savani • July 6, 2023
Vue.JS

Here, i will show you how to get url parameters in vue js. we can get query string params in vue js. we will get query string parameter using vue js route.

I will give you very simple example using vue router and we will getting all url query parameters in vue.js application.

In this example you can see to getting all params and also you can get single particular field parameter value. let's see bellow example:

You can try this type of url

http://localhost:8000?name=Hardik&email=hd@gmail.com

Example:

<!DOCTYPE html>

<html>

<head>

<title>Vue JS - Get Query Parameters Example - ItSolutionStuff.com</title>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script src="https://unpkg.com/vue-router"></script>

</head>

<body>

<div id="app">

</div>

<script type="text/javascript">

var router = new VueRouter({

mode: 'history',

routes: []

});

var myApp = new Vue({

router,

el: '#app',

mounted: function() {

parameters = this.$route.query

console.log(parameters)

name = this.$route.query.name

console.log(name)

},

});

</script>

</body>

</html>

I hope it can help you...

Tags: Vue.JS
Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

How to Use Ternary Operator in Vue JS?

Read Now →

How to Define Global Variables in Vue JS?

Read Now →

How to Get Data Attribute Value in Vue JS?

Read Now →

Vue JS Get Dropdown Selected Value Example

Read Now →

How to Get String Length in Vue JS?

Read Now →

Vue JS Call a Function On Load Example

Read Now →

How to Get Current Date and Time in Vue JS?

Read Now →

Laravel Vue Datatables Component Example

Read Now →

How to use datepicker in vuejs?

Read Now →

How to Change Date Format using Moment in Vue JS?

Read Now →

Vue JS Toggle Switch Button Example

Read Now →

How to Create and Use Component in Vue JS Cli?

Read Now →

How to Replace String in Vue JS?

Read Now →

Laravel Vue Flash Message Example From Scratch

Read Now →

Laravel Vue JS Infinite Scroll Example with Demo

Read Now →