Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.
Curso Vue Router esencial, aprende a enrutar con Vue
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
AppUserpara 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
UserInfopara mostrar más información del usuario que estemos viendo.UserInfoes un componente anidado enAppUsery 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
childrenen 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
AppUservamos 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 instanciarRouterViewmostrando 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 queRouterViewun componente Vue así que podemos pasarle custom props, sin embargo corremos el peligro de acoplar los dos componentesRouterLinkyAppUserde forma peligrosa. En la próxima lección te enseñaré la forma "correcta".
<router-view :username="username" />
- En
UserInfopodemos utilizar la propiedad recibidausernamey 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
userLocationutilizando la directivav-for.
Descarga la chuleta de Vue 3
Para tener todas las novedades de Vue 3 al alcance de la mano 🔥️
DESCARGA GRATIS LA CHULETA AHORA 💾No te pierdas ninguna novedad
Participa en la Comunidad Escuela Vue
