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
Category route & Programmatic navigation
Veamos cómo definir rutas con parámetros, y luego cómo navegar entre rutas usando código javascript en vez de la etiqueta RouterLink.
Filtrar productos por categoría
¿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 una ruta: categories/1.
Esto representará la categoría con id 1. Si agregamos categories/2, representará la categoría con id 2.
Empecemos haciendo esto con el id y luego veremos cómo mejorarlo.
¿Dónde podemos gestionar nuestras rutas?
Nuestras rutas se gestionan desde la carpeta routerIndex.ts.
Si tenemos tres componentes asociados a tres rutas:
- Una ruta con
path: '/', que es la ruta raíz y su nombre eshome. - Una ruta
cart. - Una ruta
about.
Vamos a definir un nuevo tipo de ruta llamada categories, seguida del id de la categoría.
Como el id cambiará y no será un valor constante, usaremos :.
Estos : indican que el segmento que viene es una variable (parámetro de ruta).
En este caso, el parámetro de ruta será categoryId.
El nombre de esta nueva ruta será category.
Si queremos mostrar una vista distinta cuando una categoría está seleccionada, podemos definir un categoryView, es decir, una página con un diseño propio.
Por ahora, reutilizaremos HomeView para esta otra ruta y filtraremos en base a la categoría seleccionada.
Guardamos hasta aquí.
Agregar un enlace a estas opciones
Nos dirigimos a categoryList y enlazamos un evento de clic sobre nuestras categorías.
Cuando se haga clic sobre un listItem, invocaremos un método:
@click="selectCategory"
Pasaremos el id de la categoría.
Anteriormente, hemos generado enlaces con v.router usando routerLink, como en el componente toolBar.
Ahora veremos cómo navegar hacia otra ruta con código.
Cuando se haga clic en un listItem de categoryList, se invocará selectCategory, por lo que definiremos este método.
Definición del método selectCategory
Este método recibirá un categoryId, que será un número.
Navegaremos hacia una ruta determinada.
Esto se explica en la documentación de v.router, en la sección de Programmatic Navigation.
Para navegar a una ruta determinada, llamamos al método push:
router.push({ name: 'category', params: { categoryId } })
Si estamos dentro de una instancia de Vue, el acceso es a través de this.$router:
this.$router.push({ name: 'category', params: { categoryId } })
Definimos categoryId como parámetro y pasamos su valor.
En JavaScript, cuando el nombre de la clave es igual al valor, podemos simplificarlo así:
this.$router.push({ name: 'category', params: { categoryId } })
Guardamos y hacemos una prueba:
- Clic en "oficina": nos lleva a
categories/1. - Clic en "computadora": nos lleva a
categories/2.
Cada categoría tiene su ruta asignada.
Sin embargo, el contenido no ha cambiado porque seguimos mostrando el mismo componente.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
¿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.
¿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