• En la documentación oficial de Vue Router, apartado rutas dinámicas se menciona un escenario parecido al nuestro. En nuestro caso no son ID's, sino username's, pero a parte de esta diferencia se trata del mismo mecanismo: debemos usar segmentos de ruta dinámicos para cargar el usuario correcto.
  • En Vue Router estos segmendos dinámicos se expresan con los dos puntos :. Indican que no se trata de una string sino de una referencia que se evaluará en cada caso desde el componente que esté escuchando en esa ruta.
  • Cuando encontramos una coincidencia, su valor se inyecta con el mismo identificador en la propiedad params del objeto $route que tenemos acceso desde cada componente de nuestra App (inyectamos esa dependencia en nuestra instancia principal). En nuestro caso sería accesible así $route.params.usename.
  • Por ejemplo, para el componente AppUser podemos definir en router/index.js.
import AppUser from "../components/AppUser";
...
{
  path: "/user/:username", // <- Segmento dinámico
  name: "User",
  component: AppUser
}
  • Ahora debemos acutalizar el componente AppUserList para crear enlaces a través de RouterLink (más adelante lo haremos de forma programática).
<RouterLink :to="`user/${user.login.username}`"> ... </RouterLink>
  • Ahora, en AppUser, podemos usar el objeto $route para capturar el valor del segmento de URL dinámico username y mostrarlo en el template del componente.
  • Sin embargo, nos encontramos con el problema de que ahora, al no recibir la información vía propiedades no tenemos al resto de información que mostrábamos del usuario a través de la propiedad computada userData.
  • Una solución sería acceder al AppUserList que es el componente que tiene la información de todos los usuarios a través de $refs, pero esto, además de no ser muy fiable hace que los componentes se acoplen y se establezcan relaciones para funcionar, algo que luego puede volverse en tu contra.
  • Tampoco podemos utilizar custom events ya que la relación de AppUserList y AppUser no es de padre/hijo. Por otro lado no quiero utilizar un simple Event Bus.
  • Lo que vamos a hacer es, en la próxima lección utilizar otra pieza del ecosistema Vue para almacenar y gestionar el estado (nuestro usuarios) desde cualquier lugar de la aplicación.
  • Me estoy refiriendo a Vuex.
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 📬