element動(dòng)態(tài)路由面包屑的實(shí)現(xiàn)示例

更新時(shí)間：2021年09月16日 11:34:23 作者：Start2019

本文主要介紹了element動(dòng)態(tài)路由面包屑的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

要掌握：localStorage，組件封裝

請(qǐng)?zhí)砑訄D片描述

emm，第一次上傳視頻轉(zhuǎn)gif的圖片，效果不咋好。。。
視頻轉(zhuǎn)gif 的軟件連接 http://www.dhdzp.com/softs/723131.html

在 components 下新建一個(gè) curmbs 文件夾，并在該文件夾下新建一個(gè) index.vue 文件。

router.js 中的配置，添加一個(gè) meta對(duì)象

在這里插入圖片描述

代碼

<template>
  <div class="crumbs">
    <!-- 面包屑 -->
    <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)
      // 思路：判斷meta中breadNumber為幾，就把它放在第幾個(gè)
      // 注意：存放到localStorage中的數(shù)據(jù)格式最好統(tǒng)一，我在這里把它統(tǒng)一成了數(shù)組的格式
      // levelList最終的格式要為：[{name:"xx",path:"xx",breadNum:"xx"}]
      this.getBreadcrumb()
    }
  },
  methods:{
    getBreadcrumb() { 
      // 1.獲取當(dāng)前的name,path,breadNumber
      var newName = this.$route.name;
      var newPath = this.$route.fullPath;
      var newBreadNum = this.$route.meta.breadNumber;   

      // 2.獲取前一頁存下的name,path,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 = routerInfo;     
      
      // 3.判斷是否是第一層，即初始位置，如果是第一層，分兩種情況
      if(this.$route.meta.breadNumber === 1){
      // 3.1 localStorage有值，那么this.levelList不是空值，說明是由上一個(gè)主路由進(jìn)來的，需要清空之前l(fā)ocalStorage的值，并且重新賦值給levelList
        if(this.levelList.length != 0 ){
          localStorage.removeItem("oldName");
          localStorage.removeItem("oldPath");
          localStorage.removeItem("oldBreadNum");
          localStorage.removeItem("routerInfo");
          this.levelList = [];            
        }
      // 3.2 localStorage沒有值，說明就是第一次進(jìn)主路由，直接賦值
        this.levelList.push({"name":newName,"path":newPath,"breadNumber":newBreadNum});
        // this.$store.commit('breadCrumb/BREAD_PATH',{ newName,newPath,newBreadNum });
        // 按照數(shù)組格式的方式存放
        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.breadNumber除了等于1，其他值時(shí)，this.levalList一定不是空值，判斷點(diǎn)擊的這個(gè)breadNumber數(shù)組中是否存在
        // 4.1 如果存在，就要?jiǎng)h掉這個(gè)后面的所有值，并且將點(diǎn)擊所獲得的的這個(gè)值存進(jìn)this.levalList數(shù)組中
        // 4.2 如果不存在，說明是按照順序進(jìn)行的，把它存到localStorage中，并把值給this.leavalList數(shù)組
          //在這里不用return，否則會(huì)終止循環(huán)
          for(var i = 0 ;i< this.levelList.length; i++){
            if(this.levelList[i].breadNumber == newBreadNum){
              // return true; // 為true時(shí)表示數(shù)組內(nèi)已存在 false表示不存在
              isBreadNumber = true;
              break;
            }
          }
          
          if( isBreadNumber ){
            //刪除點(diǎn)擊的后面所有信息，localStorage中的數(shù)據(jù)也要?jiǎng)h除（這里的刪除是截取，而不是完全刪除），然后將該信息添加進(jìn)去        
            //要注意的是，這里的變化還有可能是點(diǎn)擊面包屑時(shí)產(chǎn)生的，其他地方通常是通過路由跳轉(zhuǎn)得到的           
            // 注意這里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( 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>

上面 localStorage存儲(chǔ)的name, path,breadNum 是我測(cè)試的時(shí)候存的，也可以刪除，簡(jiǎn)潔版代碼：

<template>
  <div class="crumbs">
    <!-- 面包屑 -->
    <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 //默認(rèn)值為true 顯示
    }
  },
  data() {
    return {
        levelList: []
    }
  },
  watch: {
    $route(to,from) {
      // console.log(to,from)
      // 思路：判斷meta中breadNumber為幾，就把它放在第幾個(gè)
      // 注意：存放到localStorage中的數(shù)據(jù)格式最好統(tǒng)一，我在這里把它統(tǒng)一成了數(shù)組的格式
      // levelList最終的格式要為：[{name:"xx",path:"xx",breadNum:"xx"}]
      this.getBreadcrumb()
    }
  },
  methods:{
    getBreadcrumb() { 
      // 1.獲取當(dāng)前的name,path,breadNumber
      var newName = this.$route.name;
      var newPath = this.$route.fullPath;
      var newBreadNum = this.$route.meta.breadNumber;   

      // 2.獲取前一頁存下的name,path,breadNumber
      var routerInfo =  JSON.parse(window.localStorage.getItem("routerInfo")) || [];     
      this.levelList = routerInfo;     
      
      // 3.判斷是否是第一層，即初始位置，如果是第一層，分兩種情況
      if(this.$route.meta.breadNumber === 1){
      // 3.1 localStorage有值，那么this.levelList不是空值，說明是由上一個(gè)主路由進(jìn)來的，需要清空之前l(fā)ocalStorage的值，并且重新賦值給levelList
        if(this.levelList.length != 0 ){
          localStorage.removeItem("routerInfo");
          this.levelList = [];            
        }
      // 3.2 localStorage沒有值，說明就是第一次進(jìn)主路由，直接賦值
        this.levelList.push({"name":newName,"path":newPath,"breadNumber":newBreadNum});
        // 按照數(shù)組格式的方式存放
        window.localStorage.setItem("routerInfo",JSON.stringify(this.levelList));                
      } else{ 
      
      // 4.breadNumber不等于1時(shí)，那么this.levalList一定不是空值，判斷獲取到的這個(gè)breadNumber在數(shù)組中是否存在 
        var isBreadNumber = false;          
        for(var i =0 ;i< this.levelList.length; i++){
          if(this.levelList[i].breadNumber == newBreadNum){
            // return true; // 為true時(shí)表示數(shù)組內(nèi)已存在 false表示不存在
            isBreadNumber = true;
            break; //在這里不用return，return會(huì)終止循環(huán)
          }
        }
          
        // 4.1 如果存在，說明是所有路由展示已經(jīng)完（或者是展示了前面幾個(gè)，然后點(diǎn)擊面包屑），點(diǎn)擊面包屑上其中的一個(gè)標(biāo)簽
        //就要?jiǎng)h掉這個(gè)后面的所有值，并且將點(diǎn)擊所獲得的的這個(gè)值存進(jìn)this.levalList數(shù)組中
        if( isBreadNumber ){
          //刪除點(diǎn)擊的后面所有信息，localStorage中的數(shù)據(jù)也要?jiǎng)h除（這里的刪除是截取，而不是完全刪除），然后將該信息添加進(jìn)去        
          //要注意的是，這里的變化還有可能是點(diǎn)擊面包屑時(shí)產(chǎn)生的，其他地方通常是通過路由跳轉(zhuǎn)得到的           
          // 注意這里splice的用法，如果直接寫在localStorage.setItem 中，得到的值是被截取的值，而不是截取后的值
          routerInfo.splice( newBreadNum,routerInfo.length-newBreadNum);
          window.localStorage.setItem("routerInfo",JSON.stringify( routerInfo ));          
        } else { 
        
	      // 4.2 如果不存在，說明是按照順序進(jìn)行的,如一級(jí)跳到二級(jí)，再從二級(jí)跳到三級(jí)
	      //把它存到localStorage中，并把值給this.leavalList數(shù)組
          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>

注冊(cè)

在這里插入圖片描述

如果想要一部分頁面顯示該組件，一部分不顯示，那么需要用到 props 傳參。
具體做法參考：
（1）在 index.js 中

<el-card class="box-card" v-show = "isShow">
export default {
props:{
       isShow:{
          type:Boolean,
          default:true //默認(rèn)值為true 顯示
       }
    }
}

(2) 組件調(diào)用時(shí)

<crumbs :isShow=false></crumbs> //false表示不顯示面包屑

如果想要將左側(cè)主導(dǎo)航欄也顯示出來，則添加代碼：
原代碼：

<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>

到此這篇關(guān)于element動(dòng)態(tài)路由面包屑的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)element動(dòng)態(tài)路由面包屑內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: