使用JavaScript修改元素样式时，如何在返回历史记录时实现？

Question

在导航栏中，我已经使用了活动链接的样式。比如，在导航栏中我有关于我们、联系我们、材料、测验等链接，当点击这些链接时，路由会发生变化，例如'http://localhost:3000/about-us'、'http://localhost:3000/material'等，随后活动类会应用到该链接上，以便在相应的路由上突出显示该链接。

在切换链接时，活动类应用得很正确，但我注意到当从'/material'返回到'/home'之类的历史记录时（在浏览器中点击返回按钮），活动类不会应用。它仍然应用在同一路由的链接上（在点击返回之前）。

我已经在mounted()中使用javascript将活动类样式应用到导航链接上（用于初始路由检查和应用样式），同时也在点击链接时进行了切换。

那么，它在返回历史记录时不改变的原因是什么？

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