使用JavaScript修改元素样式时，如何在返回历史记录时实现？
P粉982054449
2023-08-29 21:03:19
<p>在导航栏中，我已经使用了活动链接的样式。比如，在导航栏中我有关于我们、联系我们、材料、测验等链接，当点击这些链接时，路由会发生变化，例如'http://localhost:3000/about-us'、'http://localhost:3000/material'等，随后活动类会应用到该链接上，以便在相应的路由上突出显示该链接。</p>
<p>在切换链接时，活动类应用得很正确，但我注意到当从'/material'返回到'/home'之类的历史记录时（在浏览器中点击返回按钮），活动类不会应用。它仍然应用在同一路由的链接上（在点击返回之前）。</p>
<p>我已经在mounted()中使用javascript将活动类样式应用到导航链接上（用于初始路由检查和应用样式），同时也在点击链接时进行了切换。</p>
<p>那么，它在返回历史记录时不改变的原因是什么？</p>
如果你使用
vue-router和它的<router-link>组件，你不需要自己管理这个：）该组件会给当前活动链接应用一个特殊的CSS类。默认情况下，CSS类是
router-link-active。<style> /* 样式化当前活动链接 */ .router-link-active { background-color: blue; } </style>文档： https://router.vuejs.org/api/#active-class
请注意，Nuxt中的类实际上是
nuxt-link-activenuxt-link-exact-active这里有一个示例：https://nuxtjs.org/examples/routing-active-links-classes
可以通过配置进行更改，如下所示：https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-router#linkactiveclass