Implementierungsbeispiel für dynamische Routing-Breadcrumbs für Elemente

<Vorlage>
  <div Klasse="Krümel">
    <!-- Brotkrümel -->
    <el-card Klasse="Box-Karte">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="(Ebene,Index) in dieser.Ebenenliste" :key="Index" :to="Ebene.Pfad">
          {{level.name}}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </el-Karte>

  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "Krümel",
  Daten() {
    zurückkehren {
        Ebenenliste: []
    }
  },
  betrachten:
    $route(nach,von) {
      console.log(nach,von)
      // Idee: Bestimmen Sie die breadNumber in meta und setzen Sie sie an die erste Stelle // Hinweis: Das im localStorage gespeicherte Datenformat sollte vereinheitlicht sein. Ich habe es hier in ein Array-Format vereinheitlicht // Das endgültige Format von levelList sollte sein: [{name:"xx",path:"xx",breadNum:"xx"}]
      dies.getBreadcrumb()
    }
  },
  Methoden:{
    getBreadcrumb() { 
      // 1. Aktuellen Namen, Pfad und Brotnummer abrufen
      var neuerName = this.$route.name;
      var neuerPath = this.$route.fullPath;
      var neueBreadNum = this.$route.meta.breadNumber;   

      // 2. Holen Sie sich den Namen, den Pfad und die Brotnummer, die auf der vorherigen Seite gespeichert wurden
      var alterName = JSON.parse(window.localStorage.getItem("alterName"));
      var alterPfad = JSON.parse(window.localStorage.getItem("alterPfad"));
      var alteBreadNum = JSON.parse(window.localStorage.getItem("alteBreadNum"));
      var routerInfo = JSON.parse(window.localStorage.getItem("routerInfo")) || [];  
      
      diese.levelList = routerInfo;     
      
      // 3. Bestimmen Sie, ob es sich um die erste Ebene handelt, also um die Ausgangsposition. Wenn es sich um die erste Ebene handelt, gibt es zwei Fälle, wenn (this.$route.meta.breadNumber === 1) {
      // 3.1 Wenn localStorage einen Wert hat, ist this.levelList nicht leer, was bedeutet, dass es von der vorherigen Hauptroute stammt. Sie müssen den vorherigen localStorage-Wert löschen und ihn levelList neu zuweisen
        wenn (diese.levelList.length != 0 ) {
          localStorage.removeItem("alterName");
          localStorage.removeItem("alterPfad");
          localStorage.removeItem("alteBrotnummer");
          localStorage.removeItem("routerInfo");
          diese.levelList = [];            
        }
      // 3.2 localStorage hat keinen Wert, was darauf hinweist, dass die Hauptroute zum ersten Mal betreten wird. Weisen Sie direkt einen Wert zu this.levelList.push({"name":newName,"path":newPath,"breadNumber":newBreadNum});
        // dies.$store.commit('breadCrumb/BREAD_PATH',{ neuerName,neuerPfad,neueBreadNum });
        //Im Array-Format speichern var nameStr = [];
        nameStr.push(neuerName);
        var PfadStr=[];
        pathStr.push(neuerPfad);
        var breadNumStr = [];
        breadNumStr.push(neueBreadNum);

        window.localStorage.setItem("alterName",JSON.stringify(nameStr));
        window.localStorage.setItem("alterPfad",JSON.stringify(pathStr));
        window.localStorage.setItem("alteBreadNum",JSON.stringify(breadNumStr));
        window.localStorage.setItem("routerInfo",JSON.stringify(this.levelList));
                
      }
      anders{  
        var istBrotNummer = false;   
        // 4. Außer wenn breadNumber gleich 1 ist, darf this.levalList nicht leer sein, wenn breadNumber gleich anderen Werten ist. Prüfe, ob die angeklickte breadNumber im Array existiert. // 4.1 Wenn sie existiert, lösche alle Werte danach und speichere den durch Anklicken erhaltenen Wert im Array this.levalList. // 4.2 Wenn sie nicht existiert, bedeutet das, dass es nacheinander ausgeführt wurde. Speichere sie im localStorage und gib den Wert an das Array this.leavalList weiter. // Hierher muss nicht zurückgekehrt werden, sonst wird die Schleife beendet for(var i = 0; i< this.levelList.length; i++){
            wenn(diese.levelList[i].breadNumber == neueBreadNumber){
              // return true; // true bedeutet, dass das Array bereits existiert, false bedeutet, dass es nicht existiert. isBreadNumber = true;
              brechen;
            }
          }
          
          if( istBrotnummer ){
            // Lösche alle Informationen nach dem Klicken und lösche auch die Daten in localStorage (das Löschen hier ist ein Abfangen, kein vollständiges Löschen) und füge dann die Informationen hinzu in // Beachte, dass die Änderungen hier auch durch Klicken auf die Brotkrümel verursacht werden können und andere Stellen normalerweise durch Routing-Sprünge erreicht werden // Beachte hier die Verwendung von Splice. Wenn es direkt in localStorage.setItem geschrieben wird, ist der erhaltene Wert der abgefangene Wert, nicht der abgefangene Wert oldName.splice(newBreadNum,oldName.length-newBreadNum);
            window.localStorage.setItem("alterName",JSON.stringify(alterName));

            alterPfad.splice(neueBrotnummer,alterPfad.Länge-neueBrotnummer);
            window.localStorage.setItem("alterPfad",JSON.stringify(alterPfad));

            alteBrotnummer.splice(neueBrotnummer,alteBrotnummer.length-neueBrotnummer);
            window.localStorage.setItem("alteBrotnummer",JSON.stringify(alteBrotnummer));

            routerInfo.splice( neueBreadNum, routerInfo.length-neueBreadNum);
            window.localStorage.setItem("routerInfo",JSON.stringify( routerInfo ))
            
          }
          anders{
            var oldNameStr = JSON.parse(window.localStorage.getItem("oldName"));
            alterNameStr.push(neuerName);
            window.localStorage.setItem("alterName",JSON.stringify(alterNameStr));
            
            var oldPathStr = JSON.parse(window.localStorage.getItem("oldPath"));
            alterPathStr.push(neuerPath);
            window.localStorage.setItem("alterPfad",JSON.stringify(alterPfadStr));

            var oldBreadNumStr = JSON.parse(window.localStorage.getItem("oldBreadNum"));
            alteBreadNumStr.push(neueBreadNum);
            window.localStorage.setItem("alteBrotnummer",JSON.stringify(alteBrotnummerStr));
            
            this.levelList.push({"name":neuerName,"path":neuerPfad,"breadNumber":neueBreadNumber});
            window.localStorage.setItem("routerInfo",JSON.stringify(this.levelList));     
          }
        }
      }

      
  },
  
  erstellt(){
    dies.getBreadcrumb();        
  }
}
</Skript>

<style scoped lang="scss">
.box-Karte{
  Rand unten: 20px;
}
</Stil>

<Vorlage>
  <div Klasse="Krümel">
    <!-- Brotkrümel -->
    <el-card Klasse="Box-Karte" v-show="isShow">
      <el-breadcrumb separator="/">
        <el-Breadcrumb-Element>
          <a href="javascript:;">{{$route.matched[0].name}}</a>
        </el-Breadcrumb-Element>
        <el-breadcrumb-item v-for="(Ebene,Index) in dieser.Ebenenliste" :key="Index" :to="Ebene.Pfad">
          {{level.name}}
        </el-Breadcrumb-Element>
      </el-breadcrumb>
    </el-Karte>

  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "Krümel",
  Requisiten:{
    istAnzeigen:{
        Typ: Boolean,
        default:true //Der Standardwert ist true display}
  },
  Daten() {
    zurückkehren {
        Ebenenliste: []
    }
  },
  betrachten:
    $route(nach,von) {
      // console.log(nach,von)
      // Idee: Bestimmen Sie die breadNumber in meta und setzen Sie sie an die erste Stelle // Hinweis: Das im localStorage gespeicherte Datenformat sollte vereinheitlicht sein. Ich habe es hier in ein Array-Format vereinheitlicht // Das endgültige Format von levelList sollte sein: [{name:"xx",path:"xx",breadNum:"xx"}]
      dies.getBreadcrumb()
    }
  },
  Methoden:{
    getBreadcrumb() { 
      // 1. Aktuellen Namen, Pfad und Brotnummer abrufen
      var neuerName = this.$route.name;
      var neuerPath = this.$route.fullPath;
      var neueBreadNum = this.$route.meta.breadNumber;   

      // 2. Holen Sie sich den Namen, den Pfad und die Brotnummer, die auf der vorherigen Seite gespeichert wurden
      var routerInfo = JSON.parse(window.localStorage.getItem("routerInfo")) || [];     
      diese.levelList = routerInfo;     
      
      // 3. Bestimmen Sie, ob es sich um die erste Ebene handelt, also um die Ausgangsposition. Wenn es sich um die erste Ebene handelt, gibt es zwei Fälle, wenn (this.$route.meta.breadNumber === 1) {
      // 3.1 Wenn localStorage einen Wert hat, ist this.levelList nicht leer, was bedeutet, dass es von der vorherigen Hauptroute stammt. Sie müssen den vorherigen localStorage-Wert löschen und ihn levelList neu zuweisen
        wenn (diese.levelList.length != 0 ) {
          localStorage.removeItem("routerInfo");
          diese.levelList = [];            
        }
      // 3.2 localStorage hat keinen Wert, was darauf hinweist, dass die Hauptroute zum ersten Mal betreten wird. Weisen Sie direkt einen Wert zu this.levelList.push({"name":newName,"path":newPath,"breadNumber":newBreadNum});
        //Im Array-Format speichern window.localStorage.setItem("routerInfo",JSON.stringify(this.levelList));                
      } anders{ 
      
      // 4. Wenn breadNumber ungleich 1 ist, darf this.levalList kein Nullwert sein. Überprüfen Sie, ob die erhaltene breadNumber im Array vorhanden ist var isBreadNumber = false;          
        für(var i =0; i< this.levelList.length; i++){
          wenn(diese.levelList[i].breadNumber == neueBreadNumber){
            // return true; // true bedeutet, dass das Array bereits existiert, false bedeutet, dass es nicht existiert. isBreadNumber = true;
            break; //Hier ist keine Rückkehr nötig, return beendet die Schleife}
        }
          
        // 4.1 Wenn es existiert, bedeutet dies, dass alle Routen angezeigt wurden (oder die ersten paar werden angezeigt und dann wird auf die Breadcrumbs geklickt). Klicken Sie auf eine der Beschriftungen auf den Breadcrumbs. // Alle Werte dahinter werden gelöscht und der durch Klicken erhaltene Wert wird im Array this.levalList gespeichert if (isBreadNumber) {
          // Lösche alle Informationen nach dem Klicken und lösche auch die Daten in localStorage (das Löschen hier ist ein Abfangen, kein vollständiges Löschen) und füge dann die Informationen hinzu in // Beachte, dass die Änderungen hier auch durch Klicken auf die Brotkrümel verursacht werden können und andere Stellen normalerweise durch Routing-Sprünge erreicht werden // Beachte hier die Verwendung von Splice. Wenn es direkt in localStorage.setItem geschrieben wird, ist der erhaltene Wert der abgefangene Wert, nicht der abgefangene Wert routerInfo.splice( newBreadNum,routerInfo.length-newBreadNum);
          window.localStorage.setItem("routerInfo",JSON.stringify( routerInfo ));          
        } anders { 
        
	      // 4.2 Wenn es nicht vorhanden ist, bedeutet dies, dass es der Reihe nach ausgeführt wird, z. B. durch Springen von Ebene 1 zu Ebene 2 und dann von Ebene 2 zu Ebene 3. // Speichern Sie es im lokalen Speicher und geben Sie dem Array this.leavalList den Wert zu this.levelList.push({"name":newName,"path":newPath,"breadNumber":newBreadNum});
          window.localStorage.setItem("routerInfo",JSON.stringify(this.levelList));     
        }
        
      }
    }      
  },
  
  erstellt(){
    dies.getBreadcrumb();   
  }
}
</Skript>

<style scoped lang="scss">
.box-Karte{
  Rand unten: 20px;
}

</Stil>

<el-card Klasse="Box-Karte" v-show = "isShow">
Standard exportieren {
Requisiten:{
       istAnzeigen:{
          Typ: Boolean,
          default:true //Der Standardwert ist true display}
    }
}

<crumbs :isShow=false></crumbs> //false bedeutet, keine Breadcrumbs anzuzeigen

<el-breadcrumb separator="/">  
   <el-breadcrumb-item v-for="(Ebene,Index) in dieser.Ebenenliste" :key="Index" :to="Ebene.Pfad">
     {{level.name}}
   </el-Breadcrumb-Element>
 </el-breadcrumb>

<el-Breadcrumb-Element>
  <a href="javascript:;">{{$route.matched[0].name}}</a>
</el-breadcrumb-item>