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