In der Navigationsleiste habe ich den aktiven Linkstil verwendet. In der Navigationsleiste habe ich beispielsweise Links zu uns, Kontakt, Materialien, Quizzen usw. Wenn auf diese Links geklickt wird, ändert sich die Weiterleitung, z. B. „http://localhost:3000/about-us“, „ http://localhost:3000/material usw., und die Aktivitätsklasse wird dann auf den Link angewendet, um ihn auf der entsprechenden Route hervorzuheben.
Beim Wechseln von Links wird die Aktivitätsklasse korrekt angewendet, aber ich habe festgestellt, dass die Aktivitätsklasse nicht angewendet wird, wenn ich von „/material“ zum Verlauf zurückgehe (durch Klicken auf die Schaltfläche „Zurück“ im Browser). angewendet werden. Es gilt weiterhin für Links auf derselben Route (vor dem Zurückklicken).
Ich habe Javascript in mount() verwendet, um aktive Klassenstile auf die Navigationslinks anzuwenden (für die anfängliche Routenprüfung und das Anwenden von Stilen) und auch um umzuschalten, wenn auf den Link geklickt wird.
Warum ändert sich also nichts, wenn man zurück in die Geschichte geht?
如果你使用
vue-router
和它的
组件,你不需要自己管理这个:)该组件会给当前活动链接应用一个特殊的CSS类。默认情况下,CSS类是
router-link-active
。文档:https://router.vuejs.org/api/#active-class
请注意,Nuxt中的类实际上是
nuxt-link-active
nuxt-link-exact-active
这里有一个示例:https://nuxtjs.org/examples/routing-active-links-classes
可以通过配置进行更改,如下所示:https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-router#linkactiveclass