Cómo anidar rutas en Vue Router
- Un situación muy común a la hora de desarrollar cualquier proyecto Web es tener que mostrar varios componentes que dependen uno de otro en una vista o ruta. Incluso varios segmentos de una URL pueden corresponder a diferentes componentes. Esto es lo que llamamos rutas anidadas.
- Afortunadamente con Vue Router implementarlas es muy sencillo. Veamos cómo.
- Antes de nada vamos a realizar algunos cambios CSS en el componente
AppUser
para mejorar su visualización durante el resto del curso, además de moverlo al directorioviews
.
.user {
padding: 7rem 0.5rem;
text-align: center;
}
.user__picture {
border: 1px solid;
}
.user__more {
display: block;
margin-top: 1rem;
color: black;
}
- Ahora crearemos un nuevo componente llamado
UserInfo
para mostrar más información del usuario que estemos viendo.UserInfo
es un componente anidado enAppUser
y así lo tendremos que indicar a Vue Router.
<template>
<div class="info">
<p>
User extended info...
</p>
</div>
</template>
<script>
export default {
name: "UserInfo",
};
</script>
<style scoped>
.info {
padding: 1rem;
}
</style>
- Como indica en la propia documentación, demos utilizar la propiedad
children
en la ruta que alojará sub-componentes.
...
children: [
{
path: "/user/:username/info",
name: "Info",
component: UserInfo
}
]
- Por cierto, Vue Devtools tiene una pestaña específica para información de rutas con Vue Router. Cuando hablamos de rutas dinámicas y anidadas es realmente útil.
- Ahora, en
AppUser
vamos a añadir el correo-e del usuario actualizandouserData
, crear un enlace para mostrar bajo demanda el contenido extendido conRouterLink
(pronto te enseñaré formas mejores de referirnos a rutas más allá del path) e instanciarRouterView
mostrando el componente resultante cuando se alcance la URL que termina en/info
.
<p class="user__email">{{ userData.email }}</p>
<RouterLink class="user__more" :to="`/user/${this.username}/info`"
>Show user info 👁</RouterLink>
<RouterView :username="username" />
- Si hacemos click en "Show user info" vemos el contenido estático del componente
UserInfo
. Ahora nos queda la pregunta de cómo enviarle información a la sub-ruta. Piensa queRouterView
un componente Vue así que podemos pasarle custom props, sin embargo corremos el peligro de acoplar los dos componentesRouterLink
yAppUser
de forma peligrosa. En la próxima lección te enseñaré la forma "correcta".
<router-view :username="username" />
- En
UserInfo
podemos utilizar la propiedad recibidausername
y nuestra store en Vuex para extraer algo de información utilizando desestructuración.
computed: {
user() {
return this.$store.state.users.find(
user => user.login.username === this.username
);
},
userLocation() {
const { city, country, postcode, state } = this.user.location;
return {
city,
country,
postcode,
state
};
}
}
- Sólo nos queda mostrar el contenido del objeto
userLocation
utilizando la directivav-for
.
Código inicial

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