Category route & Programmatic navigation

¿De qué manera podemos filtrar los productos cuando se haga clic sobre una categoría? Lo que vamos a hacer en este caso es definir una ruta para cada categoría. Por ejemplo, si se quiere visitar la categoría de "oficina", vamos a agregar por aquí una una ruta, por ejemplo. "categories/1". Esto representará la categoría con “id 1”. Si agregamos "categories/2", esto representará la categoría con “id 2”. Empecemos haciendo esto con el "id" y luego vamos a ver cómo podemos mejorarlo. Bien. ¿Dónde podemos gestionar nuestras rutas? Nuestras rutas se gestionan desde la carpeta "routerIndex.ts". Si nosotros aquí tenemos tres componentes asociados a tres rutas, tenemos una ruta cuyo "path" es un "/" que viene a ser la ruta raíz y cuyo nombre es "home". Luego tenemos una ruta "cart" y una ruta "about". Lo que vamos a hacer es definir un nuevo tipo de ruta. Vamos a definir una ruta llamada “categories” y seguido de esto, queremos poner aquí el "id" de la categoría como el "id" va a cambiar y no va a ser un valor constante. Tenemos que hacer uso aquí de unos ":". Estos ":" indican que el segmento que viene es una variable también conocida como parámetro de ruta. Entonces, en este caso el parámetro de ruta será "categoryId". El nombre para esta nueva ruta será "category". Si nosotros queremos mostrar una vista distinta cuando una categoría está seleccionada, podemos aquí definir un "categoryView", o sea, una página con un diseño propio. Por ahora nosotros simplemente vamos a seguir usando "HomeView". Nuestra misma página de "home" se va a reutilizar para esta otra ruta. Sin embargo, aquí vamos a filtrar en base a la categoría seleccionada. Entonces guardamos hasta aquí. Luego vamos a poner un enlace a estas dos opciones. Para ello nos dirigimos a "categoryList" y vamos a enlazar un evento de clic sobre nuestras categorías. Cuando se haga clic sobre un “listItem”, nosotros vamos a invocar un método. Entonces aquí ponemos “click=selectCategory”. Y vamos a pasar aquí el "id" de la categoría. Nosotros hemos visto anteriormente cómo generar enlaces con "v.router" usando "routerLink". Eso lo hemos hecho anteriormente para nuestro componente "toolBar". En el caso de toolBar", nosotros hemos usado la etiqueta "routerLink" para generar enlaces. Ahora vamos a ver cómo navegar hacia otra ruta con código. Por eso es que estamos agregando esto. Cuando se haga clic sobre un “listItem” de nuestro "categoryList", vamos a invocará "selectCategory". Y entonces vamos a definir un método. Vamos a definir un método "selectCategory". Este método va a recibir una "categoryId" que va a ser un número. Y aquí vamos a navegar hacia una ruta determinada. Esto se explica en la documentación de "v.router". En la sección de Programmatic Navigation ¿Cómo se navega a una ruta determinada? Simplemente tenemos que llamar al método "push”. “Router.push” e indicar a qué ruta queremos ir. Sin embargo, van a haber ocasiones en las que vamos a necesitar pasar parámetros sobre la ruta. En nuestro caso, vamos a hacer uso de este código, pero tengamos en cuenta que si estamos dentro de una instancia de Vue, el acceso es a través de "this.$router". Entonces vamos a tener "this.$router.push". Y aquí vamos a indicar, por un lado, cuál es el nombre de la ruta a la que queremos ir, en este caso. "category" Porque ese es el nombre que le hemos puesto y luego los parámetros. En este caso solamente hay un parámetro que es "categoryId". Entonces, aquí vamos a definir categorías. Y aquí vamos a pasar el valor. En JavaScript, cuando el nombre de la clave es igual al valor, podemos simplificar esto de esta manera. Guardamos y entonces vamos a hacer una prueba, le damos clic de "oficina" y estamos en “categories/1”, le damos clic de “computadora” y estamos en “categories/2”. Cada categoría ya tiene una ruta asignada. Sin embargo, el contenido no ha cambiado porque seguimos mostrando el mismo componente.

Crea una cuenta y continúa aprendiendo 🚀

Category route & Programmatic navigation