<div class="tab">
<router-link tag="div" class="tab-item" :to="{ path: 'recommend', query: {} }">
<span class="tab-link">recommend</span>
</router-link>
<router-link tag="div" class="tab-item" :to="{ path: 'singer', query: {} }">
<span class="tab-link">singer</span>
</router-link>
<router-link tag="div" class="tab-item" :to="{ path: 'rank', query: {} }">
<span class="tab-link">rank</span>
</router-link>
<router-link tag="div" class="tab-item" :to="{ path: 'search', query: {} }">
<span class="tab-link">search</span>
</router-link>
</div>
.tab{
display: flex;
height: 44px;
line-height: 44px;
font-size: 16px;
}
.tab .tab-item{
flex: 1;
text-align: center;
}
.tab .tab-item .tab-link{
padding-bottom: 5px;
color: rgba(255, 255, 255, 0.5);
}
.tab .router-link-active .tab-link{
color:
border-bottom: 2px solid
}