Tutorial Vuejs: Introducción a Vue Router

¿Qué es Vue Router?

Vue Router es la librería oficial de enrutamiento para Vue.js, diseñada para gestionar la navegación dentro de aplicaciones Vue de una sola página (SPA). Permite definir rutas que asocian componentes Vue con URLs específicas, facilitando la creación de interfaces complejas y estructuradas. Vue Router se integra profundamente con Vue.js, aprovechando su sistema de componentes y reactividad.

Una de las características clave de Vue Router es su capacidad para manipular el historial del navegador, lo que permite a los usuarios navegar por la aplicación utilizando los botones de retroceso y avance del navegador de manera coherente. Esto se logra mediante el uso de la API History del navegador o mediante el uso de hashes en URLs, dependiendo de la configuración.

Instalación y Configuración de Vue Router

Para comenzar a utilizar Vue Router en una aplicación Vue, primero es necesario instalarlo como una dependencia del proyecto. Esto se puede lograr fácilmente utilizando npm o yarn. A continuación se detallan los pasos necesarios para la instalación y configuración básica de Vue Router en un proyecto Vue.

Instalación de Vue Router:

Utiliza npm o yarn para agregar Vue Router a tu proyecto. Ejecuta uno de los siguientes comandos en la terminal:

npm install vue-router

o

yarn add vue-router

Siguiendo estos pasos, Vue Router quedará instalado en tu aplicación Vue, permitiendo que gestiones la navegación a través de las diferentes vistas definidas por tus componentes.

Creación de rutas simples

En Vue, la creación de rutas simples con Vue Router es un proceso fundamental para manejar la navegación en aplicaciones de una sola página. Esto implica mapear rutas de URL a componentes Vue, permitiendo que la aplicación muestre diferentes vistas basadas en la URL actual. Para empezar, se requiere definir un conjunto de rutas y asociarlas con los componentes correspondientes.

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeComponent from './components/HomeComponent.vue'
import AboutComponent from './components/AboutComponent.vue'

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

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

export default router

En este ejemplo, se definen dos rutas básicas: la ruta raíz '/' que carga el HomeComponent y una ruta '/about' que carga el AboutComponent. Cada ruta está asociada a un nombre único, lo que facilita la navegación programática en la aplicación.

Uso de router-view para renderizar vistas

En Vue, el componente <router-view> es fundamental para el enrutamiento dentro de las aplicaciones de una sola página (SPA) creadas con Vue Router. Actúa como un contenedor dinámico que se encarga de renderizar el componente correspondiente a la ruta actual. Cuando se navega a una nueva ruta, Vue Router actualiza automáticamente el contenido del <router-view> para reflejar la nueva ruta.

El <router-view> se coloca típicamente dentro del componente raíz de la aplicación, como App.vue, o en cualquier otro componente que deba servir como punto de entrada para las rutas anidadas. La estructura básica de un componente que utiliza <router-view> es la siguiente:

// App.vue
<template>
  <div id="app">
    <header>
      <nav>
        <ul>
          <li><router-link to="/">Inicio</router-link></li>
          <li><router-link to="/about">Acerca de</router-link></li>
        </ul>
      </nav>
    </header>
    <router-view></router-view>
  </div>
</template>
<script setup>
// Aquí no es necesario añadir lógica específica para router-view
</script>

En el ejemplo anterior, <router-view> es el lugar donde se renderizarán los componentes asociados a las rutas definidas. Cuando el usuario navega a la ruta raíz '/', el componente HomeComponent se renderiza dentro del <router-view>. Si el usuario navega a '/about', el AboutComponent se renderiza en su lugar.

Una característica avanzada de <router-view> es su capacidad para manejar rutas anidadas. Si una ruta tiene rutas secundarias, <router-view> renderizará el componente de la ruta principal y, dentro de este, otro <router-view> para manejar las rutas anidadas. Esto permite estructurar aplicaciones con vistas jerárquicas.

Por ejemplo, si tienes una ruta '/user/:id' con subrutas como '/user/:id/profile' y '/user/:id/posts', puedes definirlas de la siguiente manera:

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import UserComponent from './components/UserComponent.vue'
import UserProfile from './components/UserProfile.vue'
import UserPosts from './components/UserPosts.vue'

const routes = [
  {
    path: '/user/:id',
    component: UserComponent,
    children: [
      { path: 'profile', component: UserProfile },
      { path: 'posts', component: UserPosts }
    ]
  }
]

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

export default router

En UserComponent.vue, se incluiría un <router-view> adicional para renderizar las subrutas:

// UserComponent.vue
<template>
  <div>
    <h2>Usuario</h2>
    <nav>
      <ul>
        <li><router-link to="profile">Perfil</router-link></li>
        <li><router-link to="posts">Publicaciones</router-link></li>
      </ul>
    </nav>
    <router-view></router-view>
  </div>
</template>
<script setup>
// Aquí no es necesario añadir lógica específica para router-view
</script>

Este enfoque permite que las rutas secundarias se manejen de manera anidada, proporcionando una estructura clara y mantenible para aplicaciones complejas. Además, el uso de <router-link> garantiza que la navegación sea fluida y reactiva, sin recargar la página, lo que es esencial para la experiencia de usuario en una SPA.