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.

Actualización v4

Me parece que la versión 4 del router no es compatible con Vue 2. En mi caso lo instalé con la Vue CLI con vue add router.

De todos modos la guía del router v3 está aquí. La versión que yo tengo es la 3.5.3 y se puede instalar así: npm install vue-router@3.5.3

Puedes seguir la guía ya que sigue funcionando pero es para Vue 2 con el Router versión 3.

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@3.5.3

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

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:

import Vue from 'vue'
import Router from 'vue-router'
import Hola from '@/components/Hola'
import Perfil from '@/components/Perfil'

Vue.use(Router);

export default new Router({
    routes: [{
            path: '/',
            name: 'Hola',
            component: Hola
        },
        {
            path: '/perfil',
            name: 'Perfil',
            component: Perfil,
        },
    ]
});

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"

Además de eso, cuando se crea la app (con new Vue) debes indicar el router. Así:

import router from "./router"

new Vue({
    render: h => h(App),
    router,//<-- Aquí el router
}).$mount('#app');

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

No olvides colocar el componente <router-view/> en el lugar en donde quieres que se muestre el componente actual. Normalmente lo harás dentro de App.vue; en mi caso queda así:

<template>
  <div>
    <router-link class="navbar-item" :to='{name: "Hola"}'>Hola</router-link>
    <router-link class="navbar-item" :to='{name: "Perfil"}'>Perfil</router-link>
    <router-view/>
  </div>
</template>

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:

<template>
    <div>
        <h1>Soy el componente hola</h1>
    </div>
</template>

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

<template>
    <div>
        <h1>Soy el componente perfil</h1>
    </div>
</template>

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í:

<router-link class="navbar-item" :to='{name: "Hola"}'>Hola</router-link>
<router-link class="navbar-item" :to='{name: "Perfil"}'>Perfil</router-link>

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í:

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

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.