选中的选项卡高亮显示，直到用户没有点击vuejs中的另一个选项卡

Question

我需要突出显示当前选项卡，直到用户无法点击下一个选项卡。悬停只能帮助突出显示选项卡，但一旦选择了其他任何东西，悬停选项卡就会消失

例如，我点击了类别选项卡，它会突出显示，但一旦选择了类别中的任何产品，就会将鼠标悬停在删除位置
有人能帮我怎么做吗？

<template>
<div>
<div class="navbar w-100 is-white is-fixed-bottom bottom-navbar is-hidden-desktop is-mobile">
<div class="nav-highlight">
<router-link to="/">
<div class="has-text-centered column is-3">
<div><img class="image-resize" src="@/assets/home.jpeg" alt="home icon" /></div>
<div class="s-small f-size">Home</div>
</div>
</router-link>
</div>
<div class="nav-highlight">
<router-link to="/categories">
<div class="has-text-centered column is-3">
<div><img class="image-resize" src="@/assets/products.jpeg" alt="product icon" /></div>
<div class="s-small f-size">Products</div>
</div>
</router-link>
</div>
<div class="nav-highlight">
<router-link to="/wish-list">
<div class="has-text-centered column is-3">
<div><img class="image-resize" src="@/assets/wishlist.jpeg" alt="wishlist icon" /></div>
<div class="s-small f-size">Wislist</div>
</div>
</router-link>
</div>
<div class="nav-highlight">
<router-link to="/redeem-point">
<div class="has-text-centered column is-3">
<div><img class="image-resize" src="@/assets/redeem.jpeg" alt="redeem icon" /></div>
<div class="s-small f-size">Redeem Points</div>
</div>
</router-link>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'FooterNavBar',
components: {},
};
</script>
<style scoped>
.bottom-navbar {
display: flex;
width: 100%;
background: white;
justify-content: space-evenly;
}
.nav-highlight{
width: 25%;
}
.nav-highlight :hover {
background-color: rgb(194, 193, 193);
} 
.image-resize {
width: 180px;
height: 26px;
}
}
</style>

Answer 1

下一个例子即使您的路线中有孩子也能工作。

我以你的分类为例。您需要做的是检查路线何时更改以及哪些路线处于活动状态。例如，如果使用this.$routes.name或this.$routes.path，则可以访问当前路由名称和当前路由路径。你所需要做的就是验证当前路线是否与导航选项卡匹配。

所以你的HTML应该是这样的(你只需要对其他的使用相同的逻辑(

<div :class="$route.path.includes('/categories') ? 'nav-highlight active' : 'nav-highlight'">
<router-link to="/categories">
<div class="has-text-centered column is-3">
<div><img class="image-resize" src="@/assets/products.jpeg" alt="product icon" /></div>
<div class="s-small f-size">Products</div>
</div>
</router-link>
</div>

你的css：

.nav-highlight{
width: 25%;
}
.nav-highligth.active {
background-color: rgb(194, 193, 193);
}