- 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 directorio views
.
.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 en AppUser
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 actualizando userData
, crear un enlace para mostrar bajo demanda el contenido extendido con RouterLink
(pronto te enseñaré formas mejores de referirnos a rutas más allá del path) e instanciar RouterView
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 que RouterView
un componente Vue así que podemos pasarle custom props, sin embargo corremos el peligro de acoplar los dos componentes RouterLink
y AppUser
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 recibida username
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 directiva v-for
.