Morioh
Login
Charles Cooper

Charles Cooper

4 years ago

How to Get Query String Parameters in Vue.js

Learn how to easily get and use query string parameters in your Vue.js applications. With this step-by-step guide, you'll be able to parse query strings, access individual parameters, and use them in your templates and components.

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…

#vue-js #javascript

How to Get Query String Parameters in Vue.js
1 Likes853.25 GEEK