• El componente RouterLink añade una clase CSS cuando se encuentra en una ruta activa. Algo idea para señalar e identificar visualmente en qué parte de la aplicación nos encontramos.
  • Si examinamos los elementos a que componen la cabecera verás que se les añade la clase router-link-exact-active cuando nos encontramos en esa ruta.
  • Si en nuestro componente AppHeader creamos una regla CSS para añadirle un color diferente, debería funcionar sin más.
nav a.router-link-exact-active {
  color: goldenrod;
  border-bottom: 1px solid;
}
  • Si quieres usar tu propio nombre de clase no tienes más que (como indica en la documentación) utilizar la propiedad linkExactActiveClass en el constructor de Vue Router y actualizar tu selector CSS.
const router = new VueRouter({
  ...
  linkExactActiveClass: "escuela-vue-exact",
  ...
});
  • Pero, ¿cómo conseguir que cuando estemos utilizando la sub-ruta Info también tengamos iluminado un punto del menú?. Si te fijas ahora mismo no hay correspondencia. Pasamos de hacer click desde la ruta Home hasta Info.
  • Podemos cambiar el path de la ruta original a /user y así la asociamos con el resto.
const routes = [
  {
    path: "/user",
    name: "Home",
    ...
  },
  ...
]
  • De esta forma podemos utilizar la clase active-class que tienen los enlaces activos. También podemos cambiarla con la propiedad linkActiveClass.
const router = new VueRouter({
  ...
  linkExactActiveClass: "escuela-vue-exact",
  linkActiveClass: "escuela-vue-active",
  ...
});
  • Y actualizar nuestro código CSS acorde.
nav a.escuela-vue-exact,
nav a.escuela-vue-active {
  color: goldenrod;
  border-bottom: 1px solid;
}
  • Sin embargo, al acceder a la raíz / no encontramos nada, obviamente. Para solucionarlo, en la siguiente lección crearemos una redirección de forma sencilla.
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 📬