Navigation Guards

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.

Crea una cuenta y continúa aprendiendo 🚀

Navigation Guards