Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.
- El componente
RouterLinkañ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
aque componen la cabecera verás que se les añade la claserouter-link-exact-activecuando nos encontramos en esa ruta. - Si en nuestro componente
AppHeadercreamos 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
linkExactActiveClassen 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
Infotambién tengamos iluminado un punto del menú?. Si te fijas ahora mismo no hay correspondencia. Pasamos de hacer click desde la rutaHomehastaInfo. - Podemos cambiar el path de la ruta original a
/usery así la asociamos con el resto.
const routes = [
{
path: "/user",
name: "Home",
...
},
...
]
- De esta forma podemos utilizar la clase
active-classque 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.
Descarga la chuleta de Vue 3
Para tener todas las novedades de Vue 3 al alcance de la mano 🔥️
DESCARGA GRATIS LA CHULETA AHORA 💾No te pierdas ninguna novedad
Participa en la Comunidad Escuela Vue
