Qué es y cómo usar Vue Router

Vue Router es la biblioteca oficial de enrutamiento para Vue.js. Nos permite definir rutas en una aplicación Vue.js y asociar cada ruta a un componente específico.

Vue Router es el componente fundamental para crear aplicaciones de una sola página (SPA) donde la navegación entre vistas se realiza sin recargar la página.

Cuando el usuario navega a una URL específica, Vue Router carga el componente correspondiente, dando la sensación de que “ha cambiado de página”.

Instalación de Vue Router

Para comenzar a usar Vue Router, primero debemos instalarlo en nuestro proyecto (lógico 😜). Si no lo tenemos instalado, puedes agregarlo fácilmente.

npm install vue-router

Configuración básica

Una vez instalado, debemos configurar Vue Router en nuestra aplicación. Esto requiere tocar varios ficheros. Vamos a verlo paso a paso.

// src/router.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

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

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
<RouterView />
</template>

Creación de rutas básicas

Las rutas en Vue Router se definen como un array de objetos, donde cada objeto representa una ruta.

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

Navegación entre rutas

Para navegar entre páginas en una aplicación Vue.js con Vue Router utilizaremos el componente <RouterLink>. Este componente proporciona una forma de crear enlaces de navegación.

Al hacer clic en un <RouterLink>, Vue Router carga el componente asociado a la ruta sin recargar la página.

<template>
  <nav>
    <RouterLink to="/">Inicio</RouterLink>
    <RouterLink to="/about">Acerca de</RouterLink>
    <RouterLink to="/contact">Contacto</RouterLink>
  </nav>
</template>

Estilos activos

Puedes usar la clase .router-link-active (o .router-link-exact-active para coincidencias exactas) para resaltar visualmente el enlace de la página actual.

También podemos usar props como active-class para definir clases CSS personalizadas cuando la ruta está activa:

<RouterLink to="/about" active-class="enlace-activo">
  Acerca de
</RouterLink>

Lazy Loading de componentes

También es posible cargar componentes de manera diferida. Esto significa que el componente solo se cargará cuando se acceda a su ruta (en lugar de en la carga inicial).

Esto permite mejorar el rendimiento de la aplicación, sobre todo cuando tiene muchos, o estos son muy pesados, o alguno de ellos no se visita frecuentemente.

const routes = [
    {
        path: '/about',
        component: () => import('./views/About.vue'),
    },
];