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 ?
Si vous utilisez des
vue-router
和它的
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
.Documentation :https://router.vuejs.org/api/#active-class
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