Navegación programática

• Hasta ahora hemos estado agregando navegación de forma declarativa con RouterLink, pero también puedes hacerlo de forma programática. Útil cuando necesitas enviar al usuario a algún lugar de tu aplicación pero sin contar con el evento click o tap.
• En esta lección del curso de Vue Router aprenderás a lanzar acciones de navegación con el método push del objeto $router, accesible en toda nuestra aplicación. Para ello añadiremos la función de ver el siguiente y anterior usuario/a en el componente AppUser.
• Como primer paso debemos averiguar los índices del usuarios siguiente y anterior, averiguando el índice del actual, creando tres propiedades computadas.

...
userIndex() {
  return this.users.findIndex(
    user => user.login.username === this.username
  );
},
prevUser() {
  return this.users[this.userIndex - 1];
},
nextUser() {
  return this.users[this.userIndex + 1];
}

• Teniendo los índices vamos a crear los métodos que navegarán de forma programática para mostrar la información de esos usuarios, haciendo uso de las propiedades computada recién creadas.

loadPrevUser() {
  this.$router.push({
    name: "User",
    params: { username: this.prevUser.login.username }
  });
},
loadNextUser() {
  this.$router.push({
    name: "User",
    params: { username: this.nextUser.login.username }
  });
}

• Ahora nos queda añadir los enlaces físicos en sí que enlacen con los métodos, esta vez sin RouterLink.

<section class="user__other">
  <a @click.prevent="loadPrevUser" href="#">👈 Prev user</a> |
  <a @click.prevent="loadNextUser" href="#">Next user 👉</a>
</section>

• Como puedes ver no funciona ya que hay un problema: parece que el componente AppUser no seactualiza con la información de los usuarios adyacentes y da un error.
• Se trata de algo que está documentado y existen varias formas de forzar una recarga de ese componente. La más común sugiere que le pasemos una custom prop a RouterView con un valor dinámico pero recuerda, estaríamos acoplando de nuevo dos componentes y queremos huir de eso.
• Desde Vue Router 2.2 acceso a un guardián de ruta (te hablaré de ellos muy pronto) que se ejecuta con cada actualización de la misma. Es perfecto para esta ocasión ya que queremos reflejar en nuevo valor de username con cada cambio. Aplicar beforeRouteUpdate es sencillo.

...
beforeRouteUpdate(to, from, next) {
  this.username = to.params.username;
  next();
},