vue中导航项点击添加样式类名

效果:点击导航项字体变颜色,底部添加横线
1.主要通过isActive来判断是哪一个导航页
2.还有一个问题是只要刷新页面都会跳转到首页,是因为标签a有跳转,要阻止a标签的默认跳转,href="javascript:void(0)这样也能实现

 <li><a href="javascript:;" :class="isActive=='首页' ? 'isActive':''"  @click="toggle()"> 恵牧首页</a><i :class="isActive=='首页'? 'bottomline':'bottomLine'"></i></li>

2.之前是通过每一 个导航项的点击事件给isActive赋值,但是每一个页面都有顶部导航的子组件,会出现点击两次才能添加上类名(可能是因为每一个页面都有导航子组件),所以就想到让每一个导航页面给导航组件传递isActive值
2.1在父组件中

<header-nav :isActive='isActive'></header-nav>

2.2父组件的data中

 isActive:'加入',

3.子组件中

  props: {
    
    
    isActive:{
    
    
      type:String,
      default:"首页"
    }
  },

4.样式

.isActive {
    
    
  color: #8BC01F!important;
}

.bottomline{
    
    
  display: inline-block;
   width: 40px;
   height: 2px;
   background-color:#8BBF1F ;
   position: absolute;
    bottom: 32px;
    left: 15px;
}

4.1不点击底边横线有:hover样式

.nav .container .item .itemList li .bottomLine{
    
    
  display: inline-block;
  display: none;
   width: 40px;
   height: 2px;
   background-color:#8BBF1F ;
   position: absolute;
  bottom: 32px;
  left: 15px;
}
.nav .container .item .itemList li:hover .bottomLine{
    
    
   display:block;
}