Curso Vue Router esencial: aprende a enrutar con Vue

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

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue