How to Get Query String Parameter in VueJS

avatar
Published: Dec 16, 2022

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 [email protected] 

Getting Query Parameters Value

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/[email protected]"></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.

Getting Query Parameters Value

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. 🙂

Comments

No comments yet…