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 componenteAppUser
utilizando un objeto para definir elpath
y la propiedadparams
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
entrue
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 enUserInfo
, pero el origen de estas props ya no establece enAppUser
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.
Código inicial

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