我有两个导航部分是这样的:
<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',然后关于链接是白色的。发生了什么 - 只有第二个导航中的链接正在改变其颜色。第一个保持黑色。
如何同时将 router-link-active 类应用于两个导航?我使用两个导航栏的原因 - 一个用于普通 View ,一个用于 RWD(汉堡下拉菜单)
谢谢。
最佳答案
您可以考虑重构代码并使用 scss 根据视口(viewport)大小更改路由器链接的样式。这样你只需要一组路由器链接,事件的链接将正确突出显示
例如
.my-menu-style {
// burger style menu here
@include media-min($breakpoint-medium) {
//menu style normal menu
}
}
此外,您使用的 v-show 只是将代码隐藏在 DOM 中,您可能会发现,如果您使用 v-if 在汉堡菜单和普通菜单之间切换,它会解决您的问题,因为这实际上会添加 abd 并删除 html来自 DOM。然后,您的 html 中一次将只有一组路由器链接
关于javascript - vue-router 生成的两个导航栏,active-class 只高亮一个链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48623652/