September 6, 2020
Category : Vue.JS
Vue JS - Get Query String Parameters Example
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:
Read Also: Vue JS Get Dropdown Selected Value 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...
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
