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