Usar rutas en tu SPA con Vue
- Deja que te presente el punto de partida del curso de Vue Router.
- Tenemos una pequeña aplicación que utiliza la API de Random User para fingir un directorio de usuarios. Cuando hacemos click en el avatar de uno de ellos aparece un overlay con sólo una pequeña parte de la información del usuario.
- Utilizando componentes dinámicos podemos desplazarnos por los diferentes puntos del menú principal.
- Aunque funciona, nos encontramos con grandes carencias. Por ejemplo no tenemos URL's únicas de cada recurso, por que lo por ejemplo no podríamos compartir la información de un usuario con nadie.
- Ni siquiera tenemos un método obvio para marcar en qué sección nos encontramos.
- Como paso previo a utilizar Vue Router vamos a crear nuestro propio enrutador artesanal. Así entenderás mejor no sólo cómo utilizarlo, sino por qué lo necesitas. Aunque lo hicimos en la serie Vue Intermedio, creo que merece la pena hacer el proceso de nuevo. Es realmente esclarecedor, así que vamos a ello.
- Primero debemos crear un documento que contenga el mapa de las rutas de nuestra aplicación. Por ejemolo
router.js
en el directoriosrc
.
import Vue from "vue";
export default new Vue();
...
export const routes = [
{
path: "/",
component: AppUserList
},
{
path: "/legal",
component: AppLegal
},
{
path: "/contact",
component: AppContact
},
{
path: "/:userid/",
component: AppUser,
name: "users"
}
];
- Fíjate como estamos creando una nueva instancia de Vue para que haga de puente de comunicación con las diferentes partes de la App. También cómo estamos utilizando una ruta con segmento dinámico
/:userid
para identificar a cada uno de los usuarios. - Ahora, vamos a crear un componente que haga de enlace a las diferentes partes de nuestra aplicación. Su nombre es
RouterLink
y en su interior renderizaremos un enlace con un nombre y un destino. Cuando se haga click en él lazaremos un custom event que luego interceptaremos.
<template>
<a @click="navigate" :href="dest">{{ name }}</a>
</template>
<script>
...
methods: {
navigate(event) {
event.preventDefault();
router.$emit("navigate", { slug: this.dest });
}
}
};
</script>
- En el componente
AppHeader
debemos sustituir los enlaces actuales por el nuevo componentenRouterLink
.
<RouterLink dest="/" name="Directory" />
<RouterLink dest="/contact" name="Contact" />
<RouterLink dest="/legal" name="Legal" />
- Ha llegado el momento de crear el componente que hará de placeholder de cada uno de los componentes asociados a las rutas.
- Llamaremos a este componente
RouterView
. En su interior usaremos componentes dinámicos con el elementocomponent
de Vue. RouterView
tiene dos funciones. Por una parte obtener la URL del navegador y comprobar si existe equivalente en nuestro archivos de rutasrouter.js
. Si exite, entonces mostrar el componente asociado. Llamaremos agetRoute
cuando se creaRouterView
a través del hookcreated()
.
getRoute() {
let index = routes.findIndex(route => {
return route.path === window.location.pathname;
});
if (index < 0) {
index = 0;
window.location.pathname = "/";
}
this.visible = routes[index].component;
},
- Vamos a crear el método
setRoute
que nos permitirán reaccionar ante el custom eventnavigate
que emitimos desdeRouterLink
. En este método usará la APIhistory
del navegador para cambiar la URL y encontrar el componente que hacer visible. Además usaremos el parámetroname
para la ruta dinámica.
setRoute(params = {}) {
const slug = params.slug || "/";
window.history.pushState(null, null, slug);
let index = routes.findIndex(route => {
return (
(params.name ? route.name : route.path) ===
(params.name ? params.name : window.location.pathname)
);
});
this.visible = routes[index].component;
this.params = params;
}
- Ahora solo nos queda utilizar
RouterView
enApp.vue
y actualizarAppUserList.vue
para hacer uso de navegación programática usando un custom event y hacer nuestras pruebas.
...
showUser(user) {
router.$emit("navigate", {
name: "users",
slug: user.login.username,
user
});
},
- Aunque ahora ya disponemos de URL's para las páginas estáticas, no es así para las dinámicas. No voy a continuar para agregar esa función ya que no tiene sentido.
- En su lugar te presento Vue Router, que no sólo está preparado para interpretar rutas dinámicas sino que incluye todas las funciones y características que puedes llegar a utilizar al desarrollar tu SPA.
- Todos los conceptos que hemos visto en esta lección (archivo de rutas, componente que hace de enlace, componente que muestra las vistas, etc) te servirán para dominar Vue Router.
- Vamos a comenzar.
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

¿Tienes alguna pregunta sobre esta lección de Aprende a enrutar con Vue Router ?
Resuelve todas tus dudas sobre Vue Router en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.