Primeros pasos con VueRouter: el enrutador de Vue

Una vez que ya hemos creado un proyecto con la CLI de Vue (usando Buefy, por ejemplo) podemos agregarle otros paquetes como un enrutador.

Vue Router es el enrutador oficial para Vue.Js y permite crear Aplicaciones de una sola página o Single Page Applications.

De esta manera tenemos una navegación más fluida sin recargar la página, ahorrando ancho de banda y agregando velocidad.

En este post vamos a ver cómo instalar y configurar el enrutador de Vue usando NPM, además de configurar las rutas para que coincidan con nuestros componentes.

Instalar Vue Router

Primero debes instalar NPM o actualizar la versión que tengas. Dirígete a la carpeta del proyecto y ejecuta:

npm install -- save vue-router

Eso modificará tu package.json agregando la dependencia. La instalación debe verse así:

Instalar Vue Router

Con eso habremos instalado la dependencia del enrutador de Vue.

Configurar rutas de Vue Router

Para usar el enrutador de Vue.js y crear SPA’s debemos crear un archivo de rutas, el cual estará dentro de la carpeta src/router y tendrá el nombre de index.js.

Lo hacemos de esta manera para separar las cosas. El contenido del archivo es el siguiente, en donde importamos el router y exportamos un arreglo de rutas:

Las primeras dos líneas importan a Vue y al router. En las siguientes líneas importamos componentes que todavía no creamos y que vamos a crear más abajo (cada componente se relaciona con una ruta).

La parte más importante es exportar un nuevo Router que tiene un arreglo de objetos con las siguientes propiedades:

  1. path: la ruta, es decir, lo que se mostrará en la URL
  2. name: el nombre de la ruta
  3. component: un componente

Recomiendo hacerlo de esta forma porque cada componente coincide con una ruta, y no te preocupes, se pueden usar componentes dentro de otros componentes.

Cuando hayas creado el archivo recuerda importarlo en el main.js con la siguiente línea de código:

import router from "./router"

Con eso tenemos las rutas configuradas. Si quieres más rutas simplemente modifica el arreglo e importa los demás componentes.

Un componente por ruta

Cuando configuramos el enrutador no existían los componentes, ahora vamos a crearlos.

Su ubicación está en src/components. El componente Hola.vue es el siguiente:

De igual manera el componente Perfil.vue es el siguiente:

Ya tenemos los componentes y el enrutador.

Usar el enrutador en app

En nuestro componente principal (normalmente App.vue) debemos poner un componente llamado <router-view/> que tendrá la vista actual, es decir, la plantilla que vamos a renderizar de acuerdo a la ruta.

Además de la vista del enrutador debemos poner enlaces que van a llevar a los componentes. Pueden hacerse así:

Eso va a renderizar un enlace (bueno, un elemento <a>). La clase no es necesaria, pero es un ejemplo de cómo podemos añadir clases para que se rendericen con el enlace.

Fíjate en el atributo to, que coincide con el nombre de la ruta que configuramos en el enrutador.

Los enlaces pueden ser colocados en un menú de navegación o cualquier otra cosa, siempre y cuando sean enlaces. Yo los puse en un navbar de Bulma CSS.

Ahora es momento de probar. Ejecuta tu app con npm run serve. El componente Hola cuya ruta es la raíz / se ve así:

Componente Hola con Vue

Fíjate que únicamente cambia lo que está después del numeral #. Si hago click en Perfil se ve esto:

Componente Perfil en Vue con Vue Router

Ahora la ruta es /perfil.

El menú de navegación se mantiene, pues solo cambia lo que existe dentro de <router-view/>. Es decir, solo cambia lo del contenedor, y el contenedor puede ser colocado en cualquier lugar.

Obviamente en este caso los componentes tienen un encabezado y ya, pero en la vida real podrían ser mucho más complejos, solo estaba poniendo un ejemplo.

Conclusión

Un poco tardado pero gracias a esto podremos separar la lógica de nuestros componentes para crear una SPA con Vue JS y Vue Router.

Te invito a ver la documentación oficial del enrutador.