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

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario

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