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
Recommended:-Vue Js If Else Condition Example
Recommended:-Vue Js For Loop (v-for) Example
Recommended:-Vue JS Ajax Form Submit Tutorial
Recommended:-Vue Js Add Class To Element On Click Tutorial
Recommended:-Vue JS Checkbox Checked Event Tutorial
Recommended:-Vue Js Get Current Date and Time
Recommended:-How to Add and Use Bootstrap Modal in Vue Js App
Recommended:-Vue JS Download File using Axios App
Recommended:-Vue Js keydown Event Example
Recommended:-Vue.Js in Reverse Array Using v-for OrderBy Filter
Recommended:-Laravel 8 Install Vue Tutorial Example
Recommended:-Laravel 8 Vue JS Axios Post Request Tutorial Example
Recommended:-How to Show Flash Message Using Vue JS in Laravel 8
Recommended:-How to Create Laravel 8 Vue JS Like Dislike System
Recommended:-Laravel 8 Vue JS Image/File Upload Tutorial Example