Apabila mengubah suai gaya elemen menggunakan JavaScript, bagaimana ini boleh dicapai apabila mengembalikan sejarah?

Question

Dalam bar navigasi, saya telah menggunakan gaya pautan aktif. Sebagai contoh, dalam bar navigasi saya mempunyai pautan tentang kami, hubungi kami, bahan, kuiz, dll. Apabila pautan ini diklik, penghalaan akan berubah, seperti 'http://localhost:3000/about-us', ' http:///localhost:3000/material' dsb., dan kelas aktiviti kemudiannya digunakan pada pautan untuk menyerlahkannya pada laluan yang sepadan.

Apabila menukar pautan, kelas aktiviti digunakan dengan betul, tetapi saya perhatikan bahawa apabila kembali ke sejarah seperti '/home' daripada '/material' (menekan butang belakang dalam penyemak imbas), kelas aktiviti tidak akan diaplikasikan. Ia masih digunakan pada pautan pada laluan yang sama (sebelum mengklik kembali).

Saya telah menggunakan javascript dalam mounted() untuk menggunakan gaya kelas aktif pada pautan navigasi (untuk semakan laluan awal dan menggunakan gaya) dan juga untuk menogol apabila pautan diklik.

Jadi, apakah sebabnya ia tidak berubah apabila kembali ke sejarah?

Answer 1

Jika anda menggunakan vue-router和它的<router-link>komponen, anda tidak perlu menguruskannya sendiri :)

Komponen ini akan menggunakan kelas CSS khas pada pautan yang sedang aktif. Secara lalai, kelas CSS ialah router-link-active.

<style>
/* 样式化当前活动链接 */
.router-link-active {
   background-color: blue;
}
</style>

Dokumentasi: https://router.vuejs.org/api/#active-class

Answer 2

Sila ambil perhatian bahawa kelas dalam Nuxt sebenarnya

• nuxt-link-active
• nuxt-link-exact-active

Berikut ialah contoh: https://nuxtjs.org/examples/routing-active-links-classes

Boleh ditukar melalui konfigurasi seperti berikut: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-router#linkactiveclass