Element dynamic routing breadcrumbs implementation example

<template>
  <div class="crumbs">
    <!-- Breadcrumbs -->
    <el-card class="box-card">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="(level,index) in this.levelList" :key="index" :to="level.path">
          {{level.name}}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>

  </div>
</template>

<script>
export default {
  name : "crumbs",
  data() {
    return {
        levelList: []
    }
  },
  watch:
    $route(to,from) {
      console.log(to,from)
      // Idea: Determine the breadNumber in meta and put it in the first place // Note: The data format stored in localStorage should be unified. I have unified it into an array format here // The final format of levelList should be: [{name:"xx",path:"xx",breadNum:"xx"}]
      this.getBreadcrumb()
    }
  },
  methods:{
    getBreadcrumb() { 
      // 1. Get the current name, path, breadNumber
      var newName = this.$route.name;
      var newPath = this.$route.fullPath;
      var newBreadNum = this.$route.meta.breadNumber;   

      // 2. Get the name, path, breadNumber saved on the previous page
      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 = routerInfo;     
      
      // 3. Determine whether it is the first layer, that is, the initial position. If it is the first layer, there are two cases if(this.$route.meta.breadNumber === 1){
      // 3.1 If localStorage has a value, then this.levelList is not empty, which means it is from the previous main route. You need to clear the previous localStorage value and reassign it to levelList
        if (this.levelList.length != 0 ) {
          localStorage.removeItem("oldName");
          localStorage.removeItem("oldPath");
          localStorage.removeItem("oldBreadNum");
          localStorage.removeItem("routerInfo");
          this.levelList = [];            
        }
      // 3.2 localStorage has no value, indicating that it is the first time to enter the main route, directly assign value this.levelList.push({"name":newName,"path":newPath,"breadNumber":newBreadNum});
        // this.$store.commit('breadCrumb/BREAD_PATH',{ newName,newPath,newBreadNum });
        //Store in array format var nameStr = [];
        nameStr.push(newName);
        var pathStr=[];
        pathStr.push(newPath);
        var breadNumStr = [];
        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));
                
      }
      else{  
        var isBreadNumber = false;   
        // 4. Except for breadNumber being equal to 1, this.levalList must not be empty when breadNumber is equal to other values. Check whether the clicked breadNumber exists in the array. // 4.1 If it exists, delete all the values ​​after it and store the value obtained by clicking in the this.levalList array. // 4.2 If it does not exist, it means that it is done in sequence. Store it in localStorage and give the value to the this.leavalList array. // No need to return here, otherwise the loop will terminate for(var i = 0; i< this.levelList.length; i++){
            if(this.levelList[i].breadNumber == newBreadNum){
              // return true; // true means the array already exists, false means it does not exist isBreadNumber = true;
              break;
            }
          }
          
          if( isBreadNumber ){
            //Delete all the information after the click, and also delete the data in localStorage (the deletion here is interception, not complete deletion), and then add the information in //Note that the changes here may also be caused by clicking on the breadcrumbs, and other places are usually obtained through routing jumps //Note the usage of splice here. If it is written directly in localStorage.setItem, the value obtained is the intercepted value, not the intercepted value 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( newBreadNum, routerInfo.length-newBreadNum);
            window.localStorage.setItem("routerInfo",JSON.stringify( routerInfo ))
            
          }
          else{
            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"));
            oldPathStr.push(newPath);
            window.localStorage.setItem("oldPath",JSON.stringify(oldPathStr));

            var oldBreadNumStr = JSON.parse(window.localStorage.getItem("oldBreadNum"));
            oldBreadNumStr.push(newBreadNum);
            window.localStorage.setItem("oldBreadNum",JSON.stringify(oldBreadNumStr));
            
            this.levelList.push({"name":newName,"path":newPath,"breadNumber":newBreadNum});
            window.localStorage.setItem("routerInfo",JSON.stringify(this.levelList));     
          }
        }
      }

      
  },
  
  created(){
    this.getBreadcrumb();        
  }
}
</script>

<style scoped lang="scss">
.box-card{
  margin-bottom: 20px;
}
</style>

<template>
  <div class="crumbs">
    <!-- Breadcrumbs -->
    <el-card class="box-card" v-show="isShow">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <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">
          {{level.name}}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>

  </div>
</template>

<script>
export default {
  name : "crumbs",
  props:{
    isShow:{
        type:Boolean,
        default:true //The default value is true display}
  },
  data() {
    return {
        levelList: []
    }
  },
  watch:
    $route(to,from) {
      // console.log(to,from)
      // Idea: Determine the breadNumber in meta and put it in the first place // Note: The data format stored in localStorage should be unified. I have unified it into an array format here // The final format of levelList should be: [{name:"xx",path:"xx",breadNum:"xx"}]
      this.getBreadcrumb()
    }
  },
  methods:{
    getBreadcrumb() { 
      // 1. Get the current name, path, breadNumber
      var newName = this.$route.name;
      var newPath = this.$route.fullPath;
      var newBreadNum = this.$route.meta.breadNumber;   

      // 2. Get the name, path, breadNumber saved on the previous page
      var routerInfo = JSON.parse(window.localStorage.getItem("routerInfo")) || [];     
      this.levelList = routerInfo;     
      
      // 3. Determine whether it is the first layer, that is, the initial position. If it is the first layer, there are two cases if(this.$route.meta.breadNumber === 1){
      // 3.1 If localStorage has a value, then this.levelList is not empty, which means it is from the previous main route. You need to clear the previous localStorage value and reassign it to levelList
        if (this.levelList.length != 0 ) {
          localStorage.removeItem("routerInfo");
          this.levelList = [];            
        }
      // 3.2 localStorage has no value, indicating that it is the first time to enter the main route, directly assign value this.levelList.push({"name":newName,"path":newPath,"breadNumber":newBreadNum});
        //Store in array format window.localStorage.setItem("routerInfo",JSON.stringify(this.levelList));                
      } else{ 
      
      // 4. When breadNumber is not equal to 1, this.levalList must not be a null value. Check whether the obtained breadNumber exists in the array var isBreadNumber = false;          
        for(var i =0; i< this.levelList.length; i++){
          if(this.levelList[i].breadNumber == newBreadNum){
            // return true; // true means the array already exists, false means it does not exist isBreadNumber = true;
            break; //No need to return here, return will terminate the loop}
        }
          
        // 4.1 If it exists, it means that all routes have been displayed (or the first few are displayed, and then the breadcrumbs are clicked). Click one of the labels on the breadcrumbs. // All values ​​behind it will be deleted, and the value obtained by clicking will be stored in the this.levalList array if (isBreadNumber) {
          //Delete all the information after the click, and also delete the data in localStorage (the deletion here is interception, not complete deletion), and then add the information in //Note that the changes here may also be caused by clicking on the breadcrumbs, and other places are usually obtained through routing jumps //Note the usage of splice here. If it is written directly in localStorage.setItem, the value obtained is the intercepted value, not the intercepted value routerInfo.splice( newBreadNum,routerInfo.length-newBreadNum);
          window.localStorage.setItem("routerInfo",JSON.stringify( routerInfo ));          
        } else { 
        
	      // 4.2 If it does not exist, it means that it is done in order, such as jumping from level 1 to level 2, and then from level 2 to level 3. //Save it in localStorage and give the value to the this.leavalList array this.levelList.push({"name":newName,"path":newPath,"breadNumber":newBreadNum});
          window.localStorage.setItem("routerInfo",JSON.stringify(this.levelList));     
        }
        
      }
    }      
  },
  
  created(){
    this.getBreadcrumb();   
  }
}
</script>

<style scoped lang="scss">
.box-card{
  margin-bottom: 20px;
}

</style>

<el-card class="box-card" v-show = "isShow">
export default {
props:{
       isShow:{
          type:Boolean,
          default:true //The default value is true display}
    }
}

<crumbs :isShow=false></crumbs> //false means do not show breadcrumbs

<el-breadcrumb separator="/">  
   <el-breadcrumb-item v-for="(level,index) in this.levelList" :key="index" :to="level.path">
     {{level.name}}
   </el-breadcrumb-item>
 </el-breadcrumb>

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