Curso Vue Router esencial: aprende a enrutar con Vue

Pasar parámetros en rutas

  • 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