Lösung für das Routing-Hervorhebungsproblem von Vue-Komponenten

.router{
        Schriftart: 12px/40px „Microsoft YaHei“;
        Hintergrund: rosa;
        Hintergrund: rosa;
        Farbe: weiß;
        Cursor: Zeiger;
        Textausrichtung: zentriert;
        Anzeige: Inline-Block;
        Breite: 40px;
        Hintergrund: rosa;
        &.istAktiv{
            Hintergrund: blau;
            Farbe: rot;
        }
    }

<Vorlage>
<div id="Haupt">
    <ul style="Höhe: 40px;Hintergrund: rosa;">
        <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>
    <Router-Ansicht></Router-Ansicht>
    </div>
    
</Vorlage>
<Skript>
    Standard exportieren {
        Daten () {
            zurückkehren {
                aktivIndex2:'0',
                Artikel:[
                    {Name:'twoPage',Code:'twoPage',Pfad:'/twoPage',Standardsymbol:erforderlich('@/assets/icon/BehaviorRank-default.png'),
                    activeIcon:erfordern('@/assets/icon/behaviorrank-active.png'),isActive:true},
                    {name:'drei',code:'drei',pfad:'/drei',defaultIcon:require('@/assets/icon/ChannelAllocation-default.png'),
                    activeIcon:erfordern('@/assets/icon/ChannelAllocation-active.png'),isActive:false},
                    {name:'vier',code:'vier',pfad:'/vier',defaultIcon:erfordern('@/assets/icon/myReport-default.png'),
                    activeIcon:erfordern('@/assets/icon/myReport-active.png'),isActive:false},
                ],
            }
        },
        Methoden:{
            routerTo(Element,Index) {
                 für (lass i = 0; i < this.items.length; i++) {
                    this.items[i].isActive=false
                    
                }
                this.items[index].isActive=true
                dies.$router.push({name:item.name})
               
            },
        }
    }
</Skript>
<style lang='less'>
#hauptsächlich{
    .router{
        Schriftart: 12px/40px „Microsoft YaHei“;
        Hintergrund: rosa;
        Hintergrund: rosa;
        Farbe: weiß;
        Cursor: Zeiger;
        Textausrichtung: zentriert;
        Anzeige: Inline-Block;
        Breite: 40px;
        Hintergrund: rosa;
        
    }
    .istAktiv{
            Hintergrund: blau;
            Farbe: rot;
        }
    
}

</Stil>

erstellt(){
            // var path=window.location.hash.slice(2); //Dies ist auch akzeptabel, wenn kein Parameter vorhanden ist, wird aber nicht empfohlen var path=this.$route.name //Dies wird empfohlen console.log(path)
            if(Pfad){
                für (lass i = 0; i < this.items.length; i++) {
                    this.items[i].isActive=false
                }
                Schalter(Pfad){
                    Fall 'zweiSeiten':
                    diese.items[0].isActive=true;
                    brechen;
    
                    Fall 'drei':
                    diese.items[1].isActive=true;
                    brechen;
    
                    Fall 'vier':
                    diese.items[2].isActive=true;
                    brechen;
                }
            }
        },

.router-link-active{
 Hintergrund: rgba(255,255,255,0,8);
 Farbe: grau;
 }

<Vorlage>
 <Navigation>
  <ul>
  <li>
   <router-link to="/" exact>Blog</router-link>
   <router-link to="/AddBlog" exact>Einen Blog schreiben</router-link>
  </li>
  </ul>
 </nav>
</Vorlage>
 
<Skript>
 Standard exportieren {
  Name: "bolgheader"
 }
</Skript>
 
<Stilbereich>
 ul{
 Listenstiltyp: keiner;
 Textausrichtung: zentriert;
 Rand: 0;
 }
 li{
 Anzeige: Inline-Block;
 Rand: 0 10px;
 }
 A{
 Farbe: RGB (102, 119, 204);
 Textdekoration: keine;
 Polsterung: 12px;
 Rahmenradius: 5px;
 Schriftgröße: 20px;
 }
 nav{
 Hintergrund: #eee;
 Polsterung: 30px 0;
 Rand unten: 40px;
 }
 .router-link-active{
 Hintergrund: rgba(255,255,255,0,8);
 Farbe: grau;
 }
</Stil>