Vue JS Get Query String Parameters

To get query string parameters in Vue.js; In this tutorial, I am going to show you how to get query string parameters in vue js.

How to Get Query String Parameters in Vue js

  • Step 1 – Create New VUE JS App
  • Step 2 – Create Component
  • Step 3 – Add Component on App.vue

Step 1 – Create New VUE JS App

Run the following command on command prompt or cmd to create new vue js app:

vue create my-app

Step 2 – Create Component

Go to /src/components directory and create a new component called query-parameter.vue and add the following code into it:

<!DOCTYPE html>
<html>
<head>
    <title>How to Get Query Parameters In VUE JS- laratutorials.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>

Step 3 – Add Component on App.vue

Go to /src/ directory and App.vue file. And then add the following code into it:

<template>
    <QueryParameter></QueryParameter>
</template>
<script>
import QueryParameter from './components/QueryParameter';
export default {
  components: {
    QueryParameter
  }
}
</script>

Conclusion

Get query string parameter in vue js . In this tutorial, you have learned how to get query string parameters in vue js App.

Recommended VUE JS Tutorials

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *