Creación de Aplicaciones SPA con Vue Router

Clase 29 de 38 • Curso Básico de Vue.js 2

Resumen

¿Cómo crear una Single Page Application (SPA) con Vue?

El universo de desarrollo web está lleno de términos y conceptos que pueden parecer complejos a primera vista, pero que, una vez comprendidos, fortalecen nuestras habilidades como desarrolladores. Uno de esos conceptos es el de las Single Page Applications (SPAs), aplicaciones de una sola página. En esta guía, vamos a descubrir cómo podemos implementar una SPA utilizando Vue.js y su herramienta de enrutamiento, Vue Router.

¿Qué es una SPA?

Una Single Page Application (SPA) es una aplicación web que consta de un solo documento HTML que se actualiza dinámicamente a medida que el usuario interactúa con ella.

Estructura inicial: La página contiene una estructura HTML básica con un header o footer común.
Cambio de contenido: El contenido principal se actualiza según la ruta o URL sin recargar toda la página.

Esto significa que al cambiar la URL, sólo el contenido central se modifica, haciendo la experiencia de usuario más rápida y fluida.

¿Cómo configurar Vue Router?

Vue Router es una biblioteca oficial para Vue.js que permite gestionar las rutas en nuestras SPAs. A continuación, te guiaré a través del proceso de configuración básica.

Instalación de la dependencia: Desde la terminal, ejecuta el siguiente comando para instalar Vue Router:
```
npm install vue-router --save
```
Esto añadirá Vue Router a tu archivo package.json dentro de las dependencias.

Crear un archivo de configuración para las rutas: Dentro de tu proyecto crea un archivo routes.js o similar. Este archivo es donde definiremos nuestras rutas.

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: HomeComponent
    },
    {
      path: '/about',
      name: 'About',
      component: AboutComponent
    }
  ]
});

En este archivo, definimos las rutas y los componentes que estas rutas deben renderizar. El modo 'history' permite una navegación tipo histórico con URLs limpias.

¿Cómo se muestran los componentes en base a las rutas?

En el archivo principal (comúnmente App.vue), utilizaremos los componentes brindados por Vue Router:

Router-view: Es un componente crucial que se encarga de mostrar el componente asociado a la ruta actual.
```
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
```
Router-link: Facilita la navegación entre rutas internas de la aplicación.
```
<router-link to="/home">Home</router-link>
```

¿Cómo gestionar las rutas no existentes?

Un aspecto esencial en toda aplicación es manejar errores, como cuando un usuario intenta acceder a una ruta que no existe. Para ello, Vue Router nos permite definir estrategias para rutas no encontradas.

Ruta "catch-all": Podemos definir una ruta con un comodín * para interceptar todas las URLs no definidas.
```
{
  path: '*',
  component: NotFoundComponent
}
```

¿Qué es lo siguiente?

Hemos cubierto las bases para configurar una Single Page Application con Vue.js utilizando Vue Router. Esto nos abre un mundo de posibilidades para desarrollar aplicaciones dinámicas y eficaces.

La próxima vez nos adentraremos en la interacción con APIs, permitiendo que nuestras aplicaciones obtengan y muestren datos dinámicamente. Mantente curioso y sigue explorando el vasto horizonte del desarrollo web. ¡El conocimiento es poder!