Vue Router にクラスリストの最後に「link-exact-active-class」を追加させるにはどうすればよいですか?

Question

ルーター コンストラクターで linkExactActiveClass パラメーターを使用して、ナビゲーション バーでアクティブなリンクを強調表示してみました。

私の問題は、アクティブなクラスが CSS クラス リストの先頭に追加されることです。これは、他のクラスがそれをオーバーライドすることを意味します。

これは私のルーター構成です:

リーリー

router-link 要素は次のようになります:

リーリー ＃＃＃質問：＃＃＃

text- yellow-500

クラスは実際に既存の CSS クラスの前に追加されます。これにより、黄色のテキストが text-white クラスによって上書きされます。これを変更するにはどうすればよいですか?

Answer 1

簡単な解決策は、tailwind を使用することです (documentation) を追加します

次のように使用してみてください:

const ルーター = createRouter({
  履歴: createWebHistory(process.env.BASE_URL),
  ルート、
  linkExactActiveClass: '!text- yellow-500',
});

通常、私はこのアプローチは好きではありませんが、他に簡単な選択肢はないと思います

PS: 少なくとも tailwind 2.1 と JIT mode

を使用していることを確認してください。