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:
import Vue from 'vue'
import Router from 'vue-router'
import NuevaReceta from '@/components/NuevaReceta'
import Recetas from '@/components/Recetas'
import Recetario from '@/components/Recetario'
import EditarReceta from '@/components/EditarReceta'
import DetalleReceta from '@/components/DetalleReceta'
import AcercaDe from '@/components/AcercaDe'
Vue.use(Router);
export default new Router({
routes: [{
path: '/nueva-receta',
name: 'NuevaReceta',
component: NuevaReceta
},
{
path: '/recetas',
name: 'Recetas',
component: Recetas,
},
{
path: '/',
name: 'Recetario',
component: Recetario,
},
{
path: '/receta/editar/:id',
name: 'EditarReceta',
component: EditarReceta,
},
{
path: '/receta/:id',
name: 'DetalleReceta',
component: DetalleReceta,
},
{
path: '/acerca-de',
name: 'AcercaDe',
component: AcercaDe,
},
]
});
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í:
this.$router.push({
name: "Recetas",
});
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í:
this.$router.push({
name: "EditarReceta",
params: {
id: receta.id,
},
});
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í.