Vueコンポーネントのルーティング強調表示問題の解決策

.ルーター{
        フォント: 12px/40px 'Microsoft YaHei';
        背景: ピンク;
        背景: ピンク;
        色: 白;
        カーソル: ポインタ;
        テキスト配置: 中央;
        表示: インラインブロック;
        幅: 40px;
        背景: ピンク;
        &.isActive{
            背景: 青;
            色：赤;
        }
    }

<テンプレート>
<div id="メイン">
    <ul style="height:40px;background:pink;">
        <li class="router" v-for="(item,index) in items" :key="index" style="float:left;" :class="item.isActive?'isActive':''" @click="routerTo(item,index)">
            <span >{{item.name} </span>
        </li>
    </ul>
    <ルータービュー></ルータービュー>
    </div>
    
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
        データ （） {
            戻る {
                アクティブインデックス2:'0'、
                アイテム:[
                    {名前:'twoPage',コード:'twoPage',パス:'/twoPage',デフォルトアイコン:require('@/assets/icon/BehaviorRank-default.png'),
                    アクティブアイコン:require('@/assets/icon/behaviorrank-active.png'),isActive:true},
                    {名前:'three',コード:'three',パス:'/three',デフォルトアイコン:require('@/assets/icon/ChannelAllocation-default.png'),
                    activeIcon:require('@/assets/icon/ChannelAllocation-active.png'),isActive:false},
                    {名前:'four',コード:'four',パス:'/four',デフォルトアイコン:require('@/assets/icon/myReport-default.png'),
                    activeIcon:require('@/assets/icon/myReport-active.png'),isActive:false},
                ]、
            }
        },
        方法:{
            ルーターTo(アイテム,インデックス) {
                 (i = 0 とします; i < this.items.length; i++) {
                    this.items[i].isActive=false
                    
                }
                this.items[インデックス].isActive=true
                this.$router.push({name:item.name})
               
            },
        }
    }
</スクリプト>
<スタイル lang='less'>
＃主要{
    .ルーター{
        フォント: 12px/40px 'Microsoft YaHei';
        背景: ピンク;
        背景: ピンク;
        色: 白;
        カーソル: ポインタ;
        テキスト配置: 中央;
        表示: インラインブロック;
        幅: 40px;
        背景: ピンク;
        
    }
    .isActive{
            背景: 青;
            色：赤;
        }
    
}

</スタイル>

作成された(){
            // var path=window.location.hash.slice(2); // パラメータがない場合でもこれは許容されますが、推奨されません var path=this.$route.name // これは推奨されます console.log(path)
            if(パス){
                (i = 0 とします; i < this.items.length; i++) {
                    this.items[i].isActive=false
                }
                スイッチ(パス){
                    ケース 'twoPage':
                    this.items[0].isActive=true;
                    壊す;
    
                    ケース '3':
                    this.items[1].isActive=true;
                    壊す;
    
                    ケース '4':
                    this.items[2].isActive=true;
                    壊す;
                }
            }
        },

.ルーターリンクアクティブ{
 背景: rgba(255,255,255,0.8);
 色: グレー;
 }

<テンプレート>
 <ナビ>
  <ul>
  <li>
   <router-link to="/" exact>ブログ</router-link>
   <router-link to="/AddBlog" exact>ブログを書く</router-link>
  </li>
  </ul>
 </nav>
</テンプレート>
 
<スクリプト>
 エクスポートデフォルト{
  名前: "bolgheader"
 }
</スクリプト>
 
<スタイルスコープ>
 ul{
 リストスタイルタイプ: なし;
 テキスト配置: 中央;
 マージン:0;
 }
 li{
 表示: インラインブロック;
 マージン:0 10px;
 }
 {
 色:rgb(102, 119, 204);
 テキスト装飾: なし;
 パディング:12px;
 境界線の半径: 5px;
 フォントサイズ:20px;
 }
 ナビ{
 背景: #eee;
 パディング: 30px 0;
 下部マージン: 40px;
 }
 .ルーターリンクアクティブ{
 背景: rgba(255,255,255,0.8);
 色: グレー;
 }
</スタイル>