Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Navigation Guards
Veamos cómo hacer uso de Navigation Guards, para detectar cambios en nuestras rutas, y así mismo, capturar parámetros de ruta.
Filtrando productos por categoría
En la lección anterior, agregamos un categoryId a cada producto y definimos una ruta para cada categoría.
Ahora, filtraremos los productos en base a la categoría seleccionada.
Para ello, lo primero que debemos hacer es detectar el cambio de ruta y reaccionar ante él.
El componente ProductList tiene un estado con la lista de productos, y aquí podemos agregar hooks.
Uso de "mounted"
En lecciones anteriores, vimos un solo hook, específicamente mounted.
Este se invoca cada vez que se carga un componente.
Ejemplo:
- Agregamos un
console.log("mounted")enProductList. - Al actualizar la página y abrir la consola, veremos el término mounted.
- Sin embargo, si cambiamos de categoría, mounted ya no se llama porque estamos reutilizando el mismo componente.
Por lo tanto, mounted no nos resulta útil en este caso.
Uso de "beforeRouteUpdate"
Así como existe mounted, también tenemos un Navigation Guard llamado beforeRouteUpdate. Estos guards son métodos de v.router que nos permiten ejecutar acciones cuando la ruta cambia.
beforeRouteUpdate recibe dos argumentos:
-
to: indica hacia dónde navega el usuario. -
from: indica desde dónde viene.
Ejemplo:
console.log(to.params);
Si navegamos entre categorías, no veremos nada en consola porque ProductList no está asociado directamente a v.router.
Asociar "beforeRouteUpdate" a "HomeVue"
Para usar este navigation guard, debemos situarlo en el componente asociado a la ruta, que en este caso es HomeVue. Este se encarga de atender la ruta de categorías.
Al agregar beforeRouteUpdate en HomeVue y registrar los parámetros, ahora podemos ver los cambios en consola.
Uso de "beforeRouteEnter"
Además de beforeRouteUpdate, tenemos beforeRouteEnter, que también está relacionado con la navegación de rutas pero se comporta de manera distinta.
Ejemplo:
- Al ingresar a la ruta raíz (
home), se llama abeforeRouteEnter. - Si hacemos clic en "oficina", nuevamente se llama a
beforeRouteEnter, ycategoryIdserá1. - Si cambiamos a "computadora", ya no se llama a
beforeRouteEntersino abeforeRouteUpdate. - Si volvemos a "home", se vuelve a ejecutar
beforeRouteEnter.
Combinación de "beforeRouteEnter" y "beforeRouteUpdate"
Podemos combinar ambos guards para actualizar la lista de productos:
- Si hay un
categoryId, filtramos los productos por categoría. - Si no hay
categoryId, mostramos todos los productos.
Métodos para filtrar productos
Una vez que tenemos acceso a categoryId, necesitamos filtrar los productos. HomeVue conoce los parámetros de la ruta, pero ProductList no.
Existen dos alternativas:
-
Pasar
categoryIdcomo prop:-
ProductListrecibe un prop con elcategoryId. - Se encarga de filtrar los productos de la categoría seleccionada.
-
-
Definir un nuevo store:
- Así como tenemos un store para el carrito de compras, podemos definir otro para los productos.
- De esta manera, demostramos que es posible tener múltiples stores.
Vamos a implementar la segunda alternativa como ejercicio.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
En la lección anterior hemos agregado un “categoryId” a cada producto. Asimismo, también hemos definido una ruta para cada categoría. Lo que haremos ahora, entonces, será filtrar los productos en base a la categoría seleccionado. Para esto, lo primero que tenemos que hacer es detectar este cambio de ruta y entonces poder hacer algo ante ello. Este componente de "ProductList" tiene unos componentes, tiene un estado con la lista de productos y aquí nosotros podemos agregar “hooks”. En lecciones anteriores hemos visto solo un "hook". Específicamente hemos visto "mounted". "Mounted" se invoca cada vez que se carga un componente. Por ejemplo, vamos a agregar aquí mate y vamos a imprimir por consola "mounted" cada vez que se monte el componente "ProductList" para actualizar, abrimos la consola y vemos aquí el término "mounted". Sin embargo, si nosotros cambiamos de categoría "mounted" ya no se llama porque estamos reutilizando el mismo componente. Entonces "mounted" no nos resulta de mucha ayuda en este caso. Sin embargo, así como tenemos este método especial "mounted", tenemos también un Navigation Guards llamado “beforeRouteUpdate”. Estos navigation gards son métodos que define “v.router” para que nosotros tengamos un mayor control y podamos ejecutar ciertas acciones. Cuando se cambia de ruta, entonces por ejemplo “beforeRouteUpdate”, es un gard que recibe dos argumentos. Recibe “to” y recibe “from”. Estos argumentos contienen información de hacia dónde está navegando el usuario y desde dónde lo está haciendo. Entonces vamos a agregar un “console.log” y en este caso nos importa hacia dónde está yendo el usuario. Vamos a imprimir los parámetros de la ruta hacia la cual el usuario está yendo. Guardamos. Si nosotros actualizamos y comenzamos a navegar, no vemos nada en el lado derecho. Esto se debe a que "ProductList" no está asociado directamente con nuestro "v.router". Para poder hacer uso de este navigation gard tenemos que situarlo sobre el componente que está asociado a la ruta. Es decir, en nuestro caso serían estos componentes "vue" que representan a cada una de las rutas que tenemos. Por lo tanto, este método lo vamos a llevar más bien a “HomeVue”, porque "HomeVue" es el que se encarga de atender a la ruta de categorías. Si aquí nosotros vamos a agregar “beforeRouteUpdate” y vamos a imprimir los parámetros, ya que estamos aquí, vamos a agregar un método más. Así como tenemos “beforeRouteUpdate”, tenemos “beforeRouteEnter”. Ambos están relacionados con la navegación de rutas, pero se comportan de una manera un poco distinta. Por lo tanto, vamos a agregar un "console.log" para entender mejor en qué momento ocurre cada uno. Cuando nosotros visitamos en el navegador a nuestra ruta raíz, a nuestra ruta "home" por primera vez se llama a este navigation gard, “beforeRouteEnter”, y como vemos, la lista de parámetros se encuentra vacía. Luego yo le voy a dar clic a "oficina" y nuevamente tenemos "beforeRouteEnter" porque estamos entrando a la ruta de categorías y el “categoryId” en este caso es uno. Sin embargo, ahora si yo le doy clic a "computadora", vemos que ya no se llama a “beforeEnter” porque ya estamos en la ruta de categorías, pero si se llama a "beforeRoutUpdate" porque está cambiando el parámetro de la ruta, ya estamos en la ruta de categorías. Pero se está actualizando uno de los parámetros. Por lo tanto, en este caso se llama “beforeRoutUpdate”. Si nuevamente le doy clic a "oficina" se llama “biforeRouteUpdate” porque seguimos en la misma ruta de categorías, solo está cambiando un parámetro. Ahora, en cambio, si yo le doy clic a "home", como ya cambiamos de ruta y pasamos de la ruta de categoría a la ruta de "home", nuevamente se llama a “beforeRouteEnter”, entonces lo que vamos a hacer es combinar ambos. Vamos a hacer uso de ambos para actualizar el listado de productos. Cuando haya un "categoryId", vamos a aplicar un filtro por “categoryId” cuando no haya ningún “categoryId” vamos a mostrar todos los productos. Bien, una vez que ya tenemos acceso al “categoryId”, la pregunta es cómo podemos filtrar nuestros productos. Tenemos nuestros parámetros de ruta aquí en nuestro “HomeVue” Sin embargo, nuestro "ProductList" no está enterado de este parámetro. Una alternativa es declarar un prop para “ProductList” y pasarla a través de este prop. El “categoryId” para que “ProductList” se encargue de hacer el filtrado. Entonces “ProductList” recibiría un prop y se encargaría de listar sólo los productos de la categoría seleccionada. Esa es una alternativa. La otra alternativa es que empecemos a definir un nuevo "store". Así como tenemos un "store" para nuestro carrito de compras. Tendríamos ahora un “store” para nuestros productos. De hecho, hagamos ello a modo de ejercicio para que veas que es posible definir varios “stores” y no estás limitado sólo a uno.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript