Wie kann dies bei der Änderung von Elementstilen mithilfe von JavaScript bei der Rückgabe des Verlaufs erreicht werden?
P粉982054449
P粉982054449 2023-08-29 21:03:19
0
2
427

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?

P粉982054449
P粉982054449

Antworte allen (2)
P粉960525583

如果你使用vue-router和它的组件,你不需要自己管理这个:)

该组件会给当前活动链接应用一个特殊的CSS类。默认情况下,CSS类是router-link-active

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

    P粉395056196

    请注意,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

      Neueste Downloads
      Mehr>
      Web-Effekte
      Quellcode der Website
      Website-Materialien
      Frontend-Vorlage
      Über uns Haftungsausschluss Sitemap
      Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!