从 vue-router 生成的两个导航栏，active-class 仅突出显示一个 link

Question

我有两个导航部分是这样的：

<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 link为白色。发生了什么 - 在第二个导航中只有 link 改变了它的颜色。第一个保持黑色。如何同时将 router-link-active class 应用于两个导航？我使用两个导航栏的原因 - 一个用于普通视图，一个用于 RWD（汉堡下拉菜单）谢谢。

Answer 1

您可以考虑重构代码并使用 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 中一次

将只有一组路由器链接

从 vue-router 生成的两个导航栏，active-class 仅突出显示一个 link

Two navbars generated from vue-router, active-class highlighting only one link

javascript

css

vue.js

vue-router