Bagaimana untuk membuat Vue Router menambah 'link-exact-active-class' pada akhir senarai kelas?

Question

Saya cuba menggunakan parameter linkExactActiveClass dalam pembina penghala untuk menyerlahkan pautan aktif dalam bar navigasi.

Masalah saya ialah kelas aktif ditambah pada permulaan senarai kelas css, yang bermaksud kelas lain mengatasinya.

Ini ialah konfigurasi penghala saya:

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

Unsur

router-link kelihatan seperti ini:

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

Soalan:

text-yellow-500 类确实会添加到现有的 css 类之前。这会导致黄色文本被 text-white Liputan kelas. Bagaimana saya boleh mengubah ini?

Answer 1

Penyelesaian mudah ialah menggunakan tailwind (dokumentasi)

Cuba guna seperti ini:

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

Biasanya, saya tidak suka pendekatan ini, tetapi saya rasa tiada pilihan lain yang mudah

PS: Pastikan anda menggunakan sekurang-kurangnya tailwind 2.1 dan JIT mode