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:

See the gist on github.

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í:

See the gist on github.

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í:

See the gist on github.

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í.