Getting the query params from a URL in Nuxt
In this post we will give you information about Getting the query params from a URL in Nuxt. Hear we will give you detail about Getting the query params from a URL in NuxtAnd how to use it also give you demo for it if it is necessary.
we are going to learn about how to get the query params from a URL in the nuxt app.
Query params
Query params are passed to the end of a URL using a question mark (?) followed bythe (key=value) pairs.
Consider, we have the following URL with the query parameter in our nuxt app.
localhost:3000/persons?name=john
Getting the query params
To get the query params from an above URL, we can use this.$route.query object inside our vue component <script> tag.
<template> <div> <h1>This is the Persons page</h1> </div></template><script>export default { created() { console.log(this.$route.query.name); // john },};</script>Inside the vue component template, you can access it like this.
<template> <div> <h1>This is the Persons page</h1> <p>{{$route.query.name}}</p> </div></template><script>export default { created() { console.log(this.$route.query.name); // john },};</script>If you are passing multiple query parameters to a URL using & operator.
localhost:3000/persons?name=john&id=1
You can access it like this.
<template> <div> <h1>This is the Persons page</h1> <p>Name: {{$route.query.name}}</h1> <p>Id: {{$route.query.id}}</h1> </div></template>Hope this code and post will helped you for implement Getting the query params from a URL in Nuxt. 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