Rutas estáticas
- 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 enrouter/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 uncomponent
que se carga cuando se visita elpath
. 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 componentenAppHeader.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 atributoto
que indica el destino opath
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 componenteRouterLink
configurado, al hacer click en los enlaces verás que el contenido correspondiente se carga en el componenteRouterView
deApp.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

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