Comment faire en sorte que Vue Router ajoute « link-exact-active-class » à la fin de la liste des classes ?

Question

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.

Voici la configuration de mon routeur :

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>

Question :

text-yellow-500 类确实会添加到现有的 css 类之前。这会导致黄色文本被 text-white Couverture des cours. Comment puis-je changer cela?

Answer 1

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