J'ai essayé d'utiliser le paramètre linkExactActiveClass dans le constructeur du routeur pour mettre en évidence les liens actifs dans la barre de navigation.
Mon problème est que la classe active est ajoutée au début de la liste des classes CSS, ce qui signifie que d'autres classes la remplacent.
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
linkExactActiveClass: 'text-yellow-500',
});
L'élément router-link ressemble à ceci : <li>
<router-link class="px-2 text-white" to="/manage">Manage</router-link>
</li>
text-yellow-500 类确实会添加到现有的 css 类之前。这会导致黄色文本被 text-white Couverture des cours. Comment puis-je changer cela?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Une solution simple consiste à utiliser tailwind (documentation)
Essayez de l'utiliser comme ceci :
const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes, linkExactActiveClass: '!text-yellow-500', });Normalement, je n'aime pas cette approche, mais je pense qu'il n'y a pas d'autre option facile
PS : assurez-vous d'utiliser au moins tailwind 2.1 et JIT mode