• 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();
},
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

Código inicial
Curso Vue Router en Escuela Vue

¿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.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬