vue-router中的router-link的active-class
在 router.js 中设置默认样式名字
const router = new VueRouter({
linkActiveClass: 'active',
})
<template>
<div class="nav">
<router-link to="./goods" class="nav-item">
商品
<i class="line"></i>
</router-link>
<router-link to="./evaluation" class="nav-item">
评价
<i class="line"></i>
</router-link>
<router-link to="./business" class="nav-item">
商家
<i class="line"></i>
</router-link>
</div>
</template>
.nav .nav-item {
display: inline-block;
width: 33.33%;
text-align: center;
text-decoration: none;
background-color: #fff;
color: black;
height: 1rem;
line-height: 1rem;
color: rgb(44, 44, 44);
}
.nav-item {
position: relative;
}
.nav .active {
color: #333;
font-weight: 700;
}
.nav .active .line {
display: block;
position: absolute;
bottom: 0;
width: 0.4rem;
height: 0.05rem;
text-align: center;
background-color: rgb(15, 125, 243);
justify-content: center;
left: 50%;
transform: translateX(-50%);
}