Wie kann ich Vue Router dazu bringen, am Ende der Klassenliste „link-exact-active-class“ hinzuzufügen?

Question

Ich habe versucht, den Parameter linkExactActiveClass im Router-Konstruktor zu verwenden, um aktive Links in der Navigationsleiste hervorzuheben.

Mein Problem ist, dass die aktive Klasse am Anfang der CSS-Klassenliste hinzugefügt wird, was bedeutet, dass andere Klassen sie überschreiben.

Das ist meine Router-Konfiguration:

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  linkExactActiveClass: 'text-yellow-500',
});

Das

router-link-Element sieht folgendermaßen aus:

<li>
    <router-link class="px-2 text-white" to="/manage">Manage</router-link>
</li>

Frage:

text-yellow-500 类确实会添加到现有的 css 类之前。这会导致黄色文本被 text-white Unterrichtsabdeckung. Wie kann ich das ändern?

Answer 1

一个简单的解决方法是使用 tailwind （文档）

尝试这样使用它：

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  linkExactActiveClass: '!text-yellow-500',
});

通常，我不喜欢这种方法，但我认为没有其他简单的选择

PS：确保您至少使用 tailwind 2.1 和 JIT 模式