Vue router - Navegar a componente

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