How to Get Query Parameters from a URL in Vue.js

How to Get Query Parameters from a URL in Vue.js

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

Note that, Sometimes, you need to get query string parameters, so this tutorial will help you step by step on how you can get query string parameters in vue js app.

How to Get Query Parameters from a URL in Vue js

Just follow the following steps and learn how to get query string parameters in vue js app:

  • 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

In this step, open your terminal and execute the following command to create new vue js app:

vue create my-app

Step 2 – Create Component

In this step, visit /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- Tutsmake.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

In this step, visit /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

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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