En este corto post sobre Vue y el enrutador del mismo te mostraré cómo ir de un componente a otro de manera programada, es decir, desde el código.

De este modo podrás navegar de manera programada con el Vue Router al hacer clic en algún botón o en cualquier acción, pues lo harás por medio del código de JavaScript o TypeScript.

Configurando router

Antes de intentar navegar a otro lugar recuerda que debes configurar el router de vue. Define todas tus rutas, en mi caso tengo las siguientes:

Lo que importa aquí es que veas los ejemplos que te muestro: algunos tienen parámetros (como el de Detalle de receta) y otros no (como el Acerca de).

Navegando a otro componente de Vue

Para navegar simplemente invocamos a this.$router.push y le pasamos los valores. Si por ejemplo queremos navegar a un componente que no tiene parámetros lo hacemos así:

De este modo estoy navegando a través del nombre, de modo que si la ruta cambia no hay problema. Ahora veamos otro ejemplo cuando hay parámetros, simplemente indicamos params así:

Estamos invocando a $router.push de nuevo pero ahora pasamos params. Como la definición de la ruta del componente solicita el id le estoy pasando lo que actualmente se encuentra en receta.id.

Y con eso terminamos el post. Si quieres leer más sobre el router haz clic aquí, y si te gusta Vue puedes aprender más por aquí.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 2,003 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comentarios

Deja un comentario

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: