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;}。我期待的是当我访问带有网址的网页时'/ about'，然后关于链接是白色的。会发生什么 - 只有第二个导航中的链接正在改变其颜色。第一个仍然是黑色的。如何将router-link-active类同时应用于两个导航？我使用两个导航栏的原因 - 一个用于普通视图，一个用于RWD（汉堡包下拉列表）感谢。

Answer 1

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

例如

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

另外，你正在使用只隐藏DOM中的代码的v-show，你可能会发现如果你使用v-if在汉堡菜单和普通菜单之间切换它解决了你的问题，因为这实际上添加了abd删除了html来自DOM。然后，您的html中一次只会有一组路由器链接

从vue-router生成两个导航栏，活动类仅突出显示一个链接

1 个答案: