Wie kann dies bei der Änderung von Elementstilen mithilfe von JavaScript bei der Rückgabe des Verlaufs erreicht werden?

Question

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?

Answer 1

如果你使用vue-router和它的<router-link>组件，你不需要自己管理这个：）

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

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

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

Answer 2

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