Lors de la modification des styles d'éléments à l'aide de JavaScript, comment y parvenir lors du retour de l'historique ?

Question

Dans la barre de navigation, j'ai utilisé le style de lien actif. Par exemple, dans la barre de navigation, j'ai des liens sur nous, contactez-nous, du matériel, des quiz, etc. Lorsque vous cliquez sur ces liens, le routage change, par exemple 'http://localhost:3000/about-us', ' http:/ /localhost:3000/material' etc., et la classe d'activité est ensuite appliquée au lien pour le mettre en évidence sur l'itinéraire correspondant.

Lors du changement de lien, la classe d'activité est appliquée correctement, mais j'ai remarqué qu'en revenant à l'historique comme '/home' à partir de '/material' (en appuyant sur le bouton retour du navigateur), la classe d'activité ne le sera pas. sois appliqué. Cela s'applique toujours aux liens sur le même itinéraire (avant de cliquer en arrière).

J'ai utilisé javascript dans Mounted() pour appliquer des styles de classe actifs aux liens de navigation (pour la vérification initiale de l'itinéraire et l'application des styles) et également pour basculer lorsque vous cliquez sur le lien.

Alors, quelle est la raison pour laquelle cela ne change pas lorsque l'on remonte dans l'histoire ?

Answer 1

Si vous utilisez des vue-router和它的<router-link>composants, vous n'avez pas besoin de gérer cela vous-même :)

Ce composant appliquera une classe CSS spéciale au lien actuellement actif. Par défaut, les classes CSS sont router-link-active.

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

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

Answer 2

Veuillez noter que les cours dans Nuxt sont en réalité

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

Voici un exemple : https://nuxtjs.org/examples/routing-active-links-classes

Peut être modifié via la configuration comme suit : https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-router#linkactiveclass