How to get the query parameters from a URL in Vue
In this post we will give you information about How to get the query parameters from a URL in Vue. Hear we will give you detail about How to get the query parameters from a URL in VueAnd how to use it also give you demo for it if it is necessary.
we are going to learn about how to access the query parameters data from a URL in Vue.js.
Consider, we have this following route with query parameters in our vue app.
localhost:3000/users?name="gowtham"
To get the query parameters from an above URL, we can use this.$route.query.paramName inside the vue components.
Example:
<template> <div> <h1>User</h1> </div></template><script>export default { created() { console.log(this.$route.query.name); }};</script>Inside the vue component template, we can access it like this.
<template> <div> <h1>User: {{$route.query.name}}</h1> </div></template><script>export default {};</script>If you are passing multiple query parameters to a URL using & operator.
localhost:3000/users?name=gowtham&id=1
You can access it like this.
<template> <div> <h1>Name: {{$route.query.name}}</h1> <h1>Id: {{$route.query.id}}</h1> </div></template>Hope this code and post will helped you for implement How to get the query parameters from a URL in Vue. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs