How to Get Query String Parameter in VueJS
Hello devs, today I'll show you how to get query parameters in VueJS application. Query parameter is one of the best way to filter data according to the given condition. So, let's see how we can get our query parameters value.
Note: Tested on VueJS 2.6.14 and Vue Router@3
We'll use vue router query object to get query parameter value. Let's see the below source code.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router@3"></script>
</head>
<body>
<div id="app">
</div>
<script>
var router = new VueRouter({
mode: 'history',
routes: []
});
var myApp = new Vue({
router,
el: '#app',
mounted: function() {
let parameters = this.$route.query
console.log(parameters)
let name = this.$route.query.name
console.log(name)
},
});
</script>
</body>
</html>Which will produce the below result.
That's it for today. I hope you've enjoyed this tutorial. If you found any difficulties o questions, catch me in comment sections. Thanks for reading. 🙂
