Por: Juan Andrés Núñez
Juan Andrés Núñez - juanwmedia

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.

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

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue