在导航栏中，我使用了活动链接的样式。就像我在导航栏中有关于我们、联系我们、材料、测验等链接，当点击这些链接时，路线会发生变化，即'http://localhost:3000/about-us'、'http://localhost: 3000/material' 等，然后将活动类应用于该链接，以便该链接在相应的路线上突出显示。
在链接之间切换时，活动类正确应用，但我注意到当返回历史记录（单击浏览器中的后退按钮）时，例如从“/material”到“/home”，活动类不会适用。它仍然应用于同一路由的链接（在单击返回之前）。
我已经在 mount() 上使用 javascript 将活动类样式应用于导航链接（用于最初检查路线并应用样式）以及单击链接（切换）。
那么，回溯到历史没有改变的原因是什么？
【问题讨论】：
标签： javascript css vue.js nuxt.js
如果您使用vue-router 及其<router-link> 组件，则不必自己管理：)
组件将一个特殊的 css 类应用于当前活动链接。默认情况下，css 类是router-link-active。
<style>
/* Style the current active link */
.router-link-active {
background-color: blue;
}
</style>
【讨论】：
标签，在它们的点击功能中（点击它们时）我已经将历史推送到指定的路由，如下所示。$router.push(url) 其中“url”是从点击函数的参数中获得的。在推送方法之后，我使用 javascript 将 css 应用于导航链接。有没有办法处理这个？否则我将不得不使用 nuxt 链接（我没有使用它，因为它会导致一些问题）。
<nuxt-link> 组件，它们完全按照您的手动操作完成，但它们可以处理所有事情。我看不出它们如何给您的应用程序带来任何问题，它们只是 <a> 或 <button> 的包装器。
nuxt-link 不仅仅是a tho 的 包装器，因为它不是在做浏览器导航，而是做一个 VueJS 路由器，有意义的区别。有些人有时认为使用a 标签进入 SPA 完全没问题。
nuxt-link-active 除外，因此任何样式问题都可能与该组件的使用无关）
注意，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
【讨论】：