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