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 directorio src.

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 componenten RouterLink.

<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 elemento component de Vue.
• RouterView tiene dos funciones. Por una parte obtener la URL del navegador y comprobar si existe equivalente en nuestro archivos de rutas router.js. Si exite, entonces mostrar el componente asociado. Llamaremos a getRoute cuando se crea RouterView a través del hook created().

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 event navigate que emitimos desde RouterLink. En este método usará la API history del navegador para cambiar la URL y encontrar el componente que hacer visible. Además usaremos el parámetro name 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 en App.vue y actualizar AppUserList.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.