Clase CSS activa
- 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 claserouter-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 rutaHome
hastaInfo
. - 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 propiedadlinkActiveClass
.
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.
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

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