• 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.
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 📬