• Continuando con la última lección vemos que los enlaces el menú principal no funciona. Obviamente no hemos establecido las rutas, esos pares de path:component que se encuentran en router/index.js. Vamos a completarlo.
import AppLegal from "../views/AppLegal";
import AppContact from "../views/AppContact";
...
{
  path: "/legal",
  name: "Legal",
  component: AppLegal
},
{
  path: "/contact",
  name: "Contact",
  component: AppContact
}
  • Esto es lo que llamamos rutas estáticas, es decir, un mapeo de un path sin ningún tipo de segmento dinámico o atributo que pueda cambiar, hacia un component que se carga cuando se visita el path. Es la manera más directa y sencilla de enrutar y en cualquier proyecto siempre tendrás este tipo de rutas para secciones estáticas.
  • Ahora tenemos que hacer uso de RouterLink en nuestro componenten AppHeader.vue. De esta forma conseguiremos que los enlaces funcionen.
  • Como ves RouterLink dispone de varias opciones y propiedades para configurarlo a tu gusto. En nuestro caso vamos autilizar el atributo to que indica el destino o path de la ruta a la que queremos desplazarnos.
<router-link to="/">Directory</router-link>
<router-link to="contact">Contact</router-link>
<router-link to="/legal">Legal</router-link>
  • Con las rutas especificadas en nuestro router/index.js y el componente RouterLink configurado, al hacer click en los enlaces verás que el contenido correspondiente se carga en el componente RouterView de App.vue.
  • La pregunta ahora es cómo gestionar la información de cada usuario, que es dinámica, con Vue Router. Eso es lo que haremos en la próxima lección.
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 📬