• Como vimos la lección anterior, es peligroso unir o acoplar a través de custom props varios componentes. Para evitar que esto ocurra Vue Router permite, además de pasar parámetros en cada ruta, convertir estos en propiedades locales accesibles en el componente destino.
  • Podemos utilizar esta dinámica para hacer llegar el username al componente UserInfo sin tener que recurrir a una custom pop.
  • Podemos editar el valor de RouterLink en el componente AppUser utilizando un objeto para definir el path y la propiedad params para hacer llegar esa información a través de de parámetros.
<RouterLink
	class="user__more"
	:to="{ path: `/user/${this.username}/info`, params: {username: this.username}}"
  >Show user info 👁</RouterLink>
  • Si además utilizamos el valor props en true en cada ruta, los parámetros de la misma serán recibidos como propiedades en el componente en lugar de depender del objeto $route. Es decir, seguimos utilizando custom props por lo que no habría que cambiar nada en UserInfo, pero el origen de estas props ya no establece en AppUser sino en la propia ruta, evitando el acoplamiento.
children: [
  {
    path: "/user/:username/info",
    name: "Info",
    props: true,
    component: UserInfo,
  },
];
  • Ahora podemos quitar la custom prop en RouterView y todo seguirá funcionando igual que antes.
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 📬