Active button e Identificar ruta activa

Lo siguiente que podemos mejorar es nuestro app bar. Cuando nosotros estamos en Cart, nada nos indica que estamos en cart. Podemos ir a Home, a About, y ninguna de estas tres opciones aparece resaltada. Vamos entonces a nuestro top bar, y aquí vamos a ver que tenemos tres botones. Tenemos un Home, un Cart y un About. Los tres son un elemento v button. Entonces lo que tenemos que hacer es dar estilos a uno de ellos. La documentación de Vuetify nos muestra que la etiqueta v button acepta una propiedad llamada active. Vamos a ponerle active a Home para hacer una prueba. Home aparece resaltado. ¿Sí? Entonces esta propiedad sí funciona. Pero tenemos que hacerla dinámica. Tenemos que hacer que marque como "active" al botón que se corresponda con la ruta en la que nos encontramos. ¿Cómo podemos lograr ello? En este caso entonces, lo que podemos hacer es acceder primero a la ruta actual en la que se encuentra el usuario. Para ello accedemos a dólar root, y desde aquí accedemos al name. Name viene a ser el nombre de la ruta en la que se encuentra navegando el usuario. Aquí nosotros podemos hacer una comparación y preguntar si es igual a Home. De tal manera que, si el usuario se encuentra en Home. Este v button será marcado como activo. Siguiendo la misma idea podemos comparar la ruta actual con Cart. Y marcar como activo el segundo botón. Y de la misma forma hacemos con el tercer botón. De tal manera que cuando el usuario se encuentra en home, "root.name" será home y este estará activo. Los demás no. Y la misma idea estamos siguiendo para el segundo y el tercer botón. Entonces vamos a actualizar. Y aquí tenemos Cart resaltado, porque estamos en la ruta Cart. Nos vamos a Home y queda marcado porque estamos en Home. Nos vamos a About y de igual manera queda marcado porque nos encontramos aquí. ¿Sí?

Crea una cuenta y continúa aprendiendo 🚀

Active button e Identificar ruta activa