我有两个导航部分,如下所示:

<ul class="navigation-list">
  <li v-for="(route, index) in navRoutes">
    <router-link :to="route.path">
      <span>{{ route.name }}</span>
    </router-link>
  </li>
</ul>


接着:

<div class="burger-navbar" v-show="showBurgerMenu">
    <ul>
      <li v-for="(route, index) in navRoutes" @click="closeBurger">
        <router-link :to="route.path">
          <span>{{ route.name }}</span>
        </router-link>
      </li>
    </ul>
</div>


在我的CSS中,我声明了.router-link-active{ color: white;}
我期望的是当我访问带有url的页面时,例如'/ about',则About链接为白色。会发生什么-仅第二个导航中的链接正在更改其颜色。第一个保持黑色。
如何将router-link-active类同时应用于两个导航?我使用两个导航栏的原因-一个用于普通视图,一个用于RWD(汉堡包下拉菜单)
谢谢。

最佳答案

您可以考虑重构代码,并使用scss根据视口大小更改路由器链接的样式。这样一来,您只需要拥有一组路由器链接,活动链接就会正确突出显示

例如



.my-menu-style {
  // burger style menu here
  @include media-min($breakpoint-medium) {
    //menu style normal menu
  }


} 





此外,您使用的是v-show,它只是将代码隐藏在DOM中,所以您可能会发现,如果使用v-if在汉堡菜单和普通菜单之间切换,则可以解决您的问题,因为实际上添加abd会从DOM中删除html 。这样,您一次在html中只有一组路由器链接

09-10 11:54
查看更多