Optimus Agency | Desarrollo Web Profesional

app.js

Vue 39: Fundamentos de Vue Router

easy⏱ 5 mincoursevue

createRouter, routes y <router-view>

Vue Router es la librería de enrutamiento oficial de Vue. createRouter construye una instancia de router a partir de un array de routes — cada entrada mapea un path a un component. Coloca un <router-view> en cualquier parte de tu template y Vue Router renderizará ahí el componente que coincida con la ruta actual.

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

const router = createRouter({
  history: createWebHistory(), // real browser URL in production
  routes,
});

app.use(router);

<router-link> para navegar

<router-link to="/path"> renderiza una etiqueta <a> real y cambia de ruta sin recargar la página completa. Compáralo con un simple <a href="/path">, que recargaría toda la página — router-link mantiene todo del lado del cliente.

Por qué aquí usamos createMemoryHistory

Esta vista previa en vivo corre dentro de un iframe aislado sin una barra de URL real y navegable, así que createWebHistory() (o el historial con hash) no tiene a qué "engancharse". En su lugar usamos createMemoryHistory() — mantiene la pila de rutas en memoria y se comporta igual para push, <router-link>, guardias, todo. Una app real simplemente cambia a createWebHistory(), tal como se muestra en el código de concepto de arriba.

Pruébalo