How to Get Query Params in Vue.js 3 Composition API
2 years ago
admin
Vuejs
In this lesson, we are going to see how to get query params using Vue js 3 composition API, let's assume that we want to edit a post, we sent the id in the URL, and we want to get the id in another component.
Create the edit link
In the code below we have the edit link with the post id.
<router-link :to="`/edit/${post.id}`" class="btn btn-sm btn-warning">
<i class="bi bi-pencil"></i>
</router-link>
Get query params
To get the post id we use the useRoute() function like the code below.
<script setup>
import { useRoute } from 'vue-router';
//get routes
const route = useRoute();
//get params
const postID = route.params.id;
console.log(postID);
</script>
Create the router
Next, we add the route.
import { createRouter, createWebHashHistory } from 'vue-router'
import EditPost from '../components/EditPost.vue'
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/edit/:id',
name: 'edit',
component: EditContact
}
]
});
export default router