如何讓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 模式