如何让Vue Router在类列表末尾添加'link-exact-active-class'？

Question

我尝试使用路由器构造函数中的 linkExactActiveClass 参数来突出显示导航栏中的活动链接。

我的问题是，活动类被添加到 css 类列表的开头，这意味着其他类会覆盖它。

这是我的路由器配置：

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

router-link 元素如下所示：

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

问题：

text-yellow-500 类确实会添加到现有的 css 类之前。这会导致黄色文本被 text-white 类覆盖。我该如何改变这个？

Answer 1

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

尝试这样使用它：

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

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

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