How to Watch Route With Vue js 3 Composition API

1 year ago admin Vuejs

When you are working on a blog project with Vue js 3 Composition API and you want to display articles based on the category selected by the user, and the category is retrieved using routes you must watch the route to get articles dynamically.


How we can do that ?

All you need to do is to add the watch function and give it the fetchPostsByCategory function with the route params, so it will trigger the function every time the route changes.

                                                        
                                                                                                                        
import { useRoute } from 'vue-router';
import { onMounted, watch } from 'vue';

const route = useRoute(); //get posts by category onMounted(() => fetchPostsByCategory(route.params.categoryId));
watch(route, () => fetchPostsByCategory(route.params.categoryId));

Related Tuorials

How to Get URL Query Params in Vue 3 Composition API

In this lesson, we will see how to get URL query params in Vue 3 composition API, let's assume that...


How to Use Vue js 3 to Generate Random Passwords

In this tutorial, we will see how to use Vue js 3 to generate random passwords, so our application w...


How to Load More Data on a Button Click Using Vue js 3

In today's lesson, we will see how to load more data on a button click using vue js 3, let's assume...


How to Display Images from Laravel Public Folder in a Vue Component

In this lesson, we are going to see how to display images from Laravel public folder in a Vue compon...


Create a Custom 404 Component using Vuejs 3

In today's lesson, we are going to see how to redirect a user to a custom 404 Vue Component if a rou...


How to Add an Auth Middleware with Vue-router

In this lesson we are going to see how to make an auth middleware using vue-router, the middleware w...


Shopping Cart Using Vue js 3 Composition API and Pinia Part 2

In the second part of this project, we will add the home component, and display the products, we wil...


Shopping Cart Using Vue js 3 Composition API and Pinia Part 1

In today's tutorial, we are going to create a shopping cart using Vue js 3 composition API and pinia...


How to Get Query Params in Vue.js 3 Composition API

In this lesson, we are going to see how to get query params using Vue js 3 composition API, let's as...


How to Update an Object's value in Array in Vue js 3

Let's assume that we are working in a shopping cart with Vue js 3, the user adds items to the cart,...