要素動的ルーティングブレッドクラムの実装例

<テンプレート>
  <div class="パンくず">
    <!-- パンくずリスト -->
    <el-card クラス="ボックスカード">
      <el-breadcrumb セパレーター="/">
        <el-breadcrumb-item v-for="(level,index) in this.levelList" :key="index" :to="level.path">
          {{レベル名}}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>

  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前：「パンくず」、
  データ（） {
    戻る {
        レベルリスト: []
    }
  },
  時計：
    $route(宛先、送信元) {
      console.log(送信先、送信元)
      // アイデア: meta で breadNumber を決定し、それを最初の場所に置く // 注: localStorage に保存されるデータ形式は統一する必要があります。ここでは配列形式に統一しました // levelList の最終的な形式は次のようになります: [{name:"xx",path:"xx",breadNum:"xx"}]
      this.getBreadcrumb()
    }
  },
  方法:{
    パンくずを取得する() { 
      // 1. 現在の名前、パス、breadNumber を取得します
      var newName = this.$route.name;
      var newPath = this.$route.fullPath;
      var newBreadNum = this.$route.meta.breadNumber;   

      // 2. 前のページで保存した名前、パス、breadNumber を取得します
      var oldName = JSON.parse(window.localStorage.getItem("oldName"));
      var oldPath = JSON.parse(window.localStorage.getItem("oldPath"));
      var oldBreadNum = JSON.parse(window.localStorage.getItem("oldBreadNum"));
      var routerInfo = JSON.parse(window.localStorage.getItem("routerInfo")) || [];  
      
      this.levelList = ルーター情報;     
      
      // 3. 最初のレイヤー、つまり初期位置であるかどうかを判定します。最初のレイヤーである場合、2つのケースがあります if(this.$route.meta.breadNumber === 1){
      // 3.1 localStorage に値がある場合、this.levelList は空ではありません。つまり、前のメイン ルートからのものです。前の localStorage 値をクリアして、levelList に再割り当てする必要があります。
        （this.levelList.length != 0 ）の場合{
          localStorage.removeItem("古い名前");
          localStorage.removeItem("古いパス");
          localStorage.removeItem("古いBreadNum");
          localStorage.removeItem("ルーター情報");
          this.levelList = [];            
        }
      // 3.2 localStorage には値がないので、メイン ルートに初めて入るので、値を直接割り当てます。this.levelList.push({"name":newName,"path":newPath,"breadNumber":newBreadNum});
        // this.$store.commit('breadCrumb/BREAD_PATH',{ newName,newPath,newBreadNum });
        //配列形式で保存 var nameStr = [];
        nameStr.push(新しい名前);
        var pathStr=[];
        pathStr.push(新しいパス);
        var パン番号Str = [];
        breadNumStr.push(newBreadNum);

        window.localStorage.setItem("oldName",JSON.stringify(nameStr));
        window.localStorage.setItem("oldPath",JSON.stringify(pathStr));
        window.localStorage.setItem("oldBreadNum",JSON.stringify(breadNumStr));
        window.localStorage.setItem("routerInfo",JSON.stringify(this.levelList));
                
      }
      それ以外{  
        var isBreadNumber = false;   
        // 4.breadNumberが1に等しい場合を除き、breadNumberが他の値と等しい場合、this.levalListは空であってはなりません。クリックされたbreadNumberが配列に存在するかどうかを確認します。 // 4.1 存在する場合は、それ以降の値をすべて削除し、クリックして取得した値をthis.levalList配列に格納します。 // 4.2 存在しない場合は、順番に行われたことを意味します。localStorageに格納し、this.leavalList配列に値を渡します。 // ここで戻る必要はありません。そうしないと、ループが終了します for(var i = 0; i< this.levelList.length; i++){
            if(this.levelList[i].breadNumber == newBreadNum){
              // true を返します。 // true は配列がすでに存在することを意味します。false は配列が存在しないことを意味します。 isBreadNumber = true;
              壊す;
            }
          }
          
          if(isBreadNumber){
            // クリック後のすべての情報を削除し、localStorage のデータも削除します (ここでの削除は完全な削除ではなく、インターセプションです)。その後、次の情報を追加します // ここでの変更はパンくずリストをクリックすることでも発生する可能性があり、他の場所は通常ルーティング ジャンプを通じて取得されることに注意してください // ここでの splice の使用方法に注意してください。localStorage.setItem に直接記述した場合、取得される値はインターセプトされた値であり、インターセプトされた値ではありません oldName.splice(newBreadNum,oldName.length-newBreadNum);
            window.localStorage.setItem("oldName",JSON.stringify(oldName));

            oldPath.splice(newBreadNum、oldPath.length-newBreadNum);
            window.localStorage.setItem("oldPath",JSON.stringify(oldPath));

            oldBreadNum.splice(newBreadNum、oldBreadNum.length-newBreadNum);
            window.localStorage.setItem("oldBreadNum",JSON.stringify(oldBreadNum));

            routerInfo.splice( 新しいブレッド番号、 routerInfo.length - 新しいブレッド番号);
            window.localStorage.setItem("routerInfo",JSON.stringify(routerInfo))
            
          }
          それ以外{
            var oldNameStr = JSON.parse(window.localStorage.getItem("oldName"));
            oldNameStr.push(newName);
            window.localStorage.setItem("oldName",JSON.stringify(oldNameStr));
            
            var oldPathStr = JSON.parse(window.localStorage.getItem("oldPath"));
            古いPathStrを新しいPathにプッシュします。
            window.localStorage.setItem("oldPath",JSON.stringify(oldPathStr));

            var oldBreadNumStr = JSON.parse(window.localStorage.getItem("oldBreadNum"));
            古いBreadNumStr.push(新しいBreadNum);
            window.localStorage.setItem("oldBreadNum",JSON.stringify(oldBreadNumStr));
            
            this.levelList.push({"name":新しい名前、"path":新しいパス、"breadNumber":新しいBreadNum});
            window.localStorage.setItem("routerInfo",JSON.stringify(this.levelList));     
          }
        }
      }

      
  },
  
  作成された(){
    パンくずを取得します。        
  }
}
</スクリプト>

<スタイル スコープ lang="scss">
.ボックスカード{
  下マージン: 20px;
}
</スタイル>

<テンプレート>
  <div class="パンくず">
    <!-- パンくずリスト -->
    <el-card class="box-card" v-show="isShow">
      <el-breadcrumb セパレーター="/">
        <el-ブレッドクラム項目>
          <a href="javascript:;">{{$route.matched[0].name}}</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item v-for="(level,index) in this.levelList" :key="index" :to="level.path">
          {{レベル名}}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>

  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前：「パンくず」、
  小道具:{
    表示:{
        タイプ:ブール値、
        default:true //デフォルト値はtrueです。表示}
  },
  データ（） {
    戻る {
        レベルリスト: []
    }
  },
  時計：
    $route(宛先、送信元) {
      // コンソール.log(to,from)
      // アイデア: meta で breadNumber を決定し、それを最初の場所に置く // 注: localStorage に保存されるデータ形式は統一する必要があります。ここでは配列形式に統一しました // levelList の最終的な形式は次のようになります: [{name:"xx",path:"xx",breadNum:"xx"}]
      this.getBreadcrumb()
    }
  },
  方法:{
    getBreadcrumb() { 
      // 1. 現在の名前、パス、breadNumber を取得します
      var newName = this.$route.name;
      var newPath = this.$route.fullPath;
      var newBreadNum = this.$route.meta.breadNumber;   

      // 2. 前のページで保存した名前、パス、breadNumber を取得します
      var routerInfo = JSON.parse(window.localStorage.getItem("routerInfo")) || [];     
      this.levelList = ルーター情報;     
      
      // 3. 最初のレイヤー、つまり初期位置であるかどうかを判定します。最初のレイヤーである場合、2つのケースがあります if(this.$route.meta.breadNumber === 1){
      // 3.1 localStorage に値がある場合、this.levelList は空ではありません。つまり、前のメイン ルートからのものです。前の localStorage 値をクリアして、levelList に再割り当てする必要があります。
        （this.levelList.length != 0 ）の場合 {
          localStorage.removeItem("ルーター情報");
          this.levelList = [];            
        }
      // 3.2 localStorage には値がないので、メイン ルートに初めて入るので、値を直接割り当てます。this.levelList.push({"name":newName,"path":newPath,"breadNumber":newBreadNum});
        //配列形式で保存 window.localStorage.setItem("routerInfo",JSON.stringify(this.levelList));                
      } それ以外{ 
      
      // 4. breadNumber が 1 でない場合、this.levalList は null 値であってはなりません。取得した breadNumber が配列内に存在するかどうかを確認します。var isBreadNumber = false;          
        for(var i =0; i< this.levelList.length; i++){
          if(this.levelList[i].breadNumber == newBreadNum){
            // true を返します。 // true は配列がすでに存在することを意味します。false は配列が存在しないことを意味します。 isBreadNumber = true;
            break; //ここで return する必要はありません。return でループが終了します}
        }
          
        // 4.1 存在する場合は、すべてのルートが表示された（または最初のいくつかが表示され、その後パンくずリストがクリックされた）ことを意味します。パンくずリストのラベルの1つをクリックします。 // その後ろのすべての値が削除され、クリックして取得した値が this.levalList 配列に格納されます if (isBreadNumber) {
          // クリック後の情報をすべて削除し、localStorage のデータも削除します (ここでの削除は完全な削除ではなく、インターセプションです)。その後、次の情報を追加します。 // ここでの変更は、パンくずリストをクリックすることによっても発生する可能性があり、他の場所は通常、ルーティング ジャンプによって取得されることに注意してください。 // ここでの splice の使用方法に注意してください。localStorage.setItem に直接記述した場合、取得される値はインターセプトされた値であり、インターセプトされた値ではありません。 routerInfo.splice( newBreadNum,routerInfo.length-newBreadNum);
          window.localStorage.setItem("routerInfo",JSON.stringify(routerInfo));          
        } それ以外 { 
        
	      // 4.2 存在しない場合は、レベル 1 からレベル 2 にジャンプし、次にレベル 2 からレベル 3 にジャンプするなど、順番に実行されることを意味します。//localStorage に保存し、値を this.leavalList 配列に渡します。this.levelList.push({"name":newName,"path":newPath,"breadNumber":newBreadNum});
          window.localStorage.setItem("routerInfo",JSON.stringify(this.levelList));     
        }
        
      }
    }      
  },
  
  作成された(){
    パンくずを取得します。   
  }
}
</スクリプト>

<スタイル スコープ lang="scss">
.ボックスカード{
  下マージン: 20px;
}

</スタイル>

<el-card class="box-card" v-show = "isShow">
エクスポートデフォルト{
小道具:{
       表示:{
          タイプ:ブール値、
          default:true //デフォルト値はtrueです。表示}
    }
}

<crumbs :isShow=false></crumbs> //false はパンくずリストを表示しないことを意味します

<el-breadcrumb セパレーター="/">  
   <el-breadcrumb-item v-for="(level,index) in this.levelList" :key="index" :to="level.path">
     {{レベル名}}
   </el-breadcrumb-item>
 </el-breadcrumb>

<el-ブレッドクラム項目>
  <a href="javascript:;">{{$route.matched[0].name}}</a>
</el-breadcrumb-item>