クリックして、vueのナビゲーションアイテムにスタイルクラス名を追加します

効果：ナビゲーションアイテムのフォントをクリックして色を変更し、下部に水平線を追加し
ます1.主にisActiveを使用して、どのナビゲーションページであるかを判別します
2.別の問題は、ページが更新されている限り、更新されることです。ホームページにジャンプします。これは、ラベルaにジャンプがあるためです。タグのデフォルトのジャンプを防止します。href= "javascript：void（0）も実現できます。

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

2.以前は、isActiveは各ナビゲーションアイテムのクリックイベントによって割り当てられていましたが、各ページにはトップナビゲーションのサブコンポーネントがあり、クラス名を追加するために2回クリックする必要があります（各ページにナビゲーションサブコンポーネントがあるため）。各ナビゲーションページにisActive値
2.1を親コンポーネントのナビゲーションコンポーネントに渡させることを考えました

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

2.2親コンポーネントのデータ内

 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下の水平線をクリックしないでください：ホバースタイル

.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;
}