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 componenteAppUser
. - 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. AplicarbeforeRouteUpdate
es sencillo.
...
beforeRouteUpdate(to, from, next) {
this.username = to.params.username;
next();
},
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.