vue.js怎么實現動態面包屑

本篇內容介紹了“vue.js怎么實現動態面包屑”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

需求描述:

點擊左側的導航,跳轉到不同的頁面,并且根據導航的路徑,動態生成面包屑.面包屑的數據均來自于左側的導航.

思路:

1.面包屑作為一個單獨的組件,在頁面中引入.頁面的結構如下:

<template>
    <div class="page-center">
        <top-bar></top-bar> <!--頁面頂部信息,固定在頂部-->
        <div class="webui-menu-vertical left-nav"  v-bind:>
            <menu-vertical
                :menu-list="menuList"
                @flexMenuClick="flexMenuClick"
                @menuClick="menuClick"></menu-vertical>
        </div> <!--左側菜單導航,點擊這邊的菜單,右邊的面包屑變化-->
        <div class="right-content"  v-bind:>
            <bread-crumb></bread-crumb> <!--面包屑組件-->
            <div class="content">
                <router-view></router-view> <!--路由頁面-->
            </div>
            
        </div>
        
    </div>
</template>

2.面包屑組件的實現:

<!--主要代碼實現,樣式自己DIY-->
<template>
    <div class="bread-crumb">
        <ul>
            <li v-for=" (item, index) in breadCrumbList" :key="item.title">
                <router-link>{{item.title}}</router-link>
                <span v-if="index < breadCrumbList.length-1">/</span>
            </li>
        </ul>
    </div>
</template>
 
<script>
 
export default {
    name:'bread-crumb',
    computed: {
      breadCrumbList() { //將面包屑的數據存儲在vuex狀態中
          return this.$store.state.breadCrumbList
      }
    },
}
</script>

3.每次路由更新的時候,更新面包屑的數據:

//main.js
router.beforeEach( (to, from, next) => { //這里用到導航守衛
  store.commit('setCurrRouteNme', {currRouteNme:to.name});
  store.dispatch('setMenuList').then( ()=> { //因為面包屑的數據來自左側菜單,這邊先獲取左側導航數據然后根據當前路徑生成面包屑
    store.dispatch('setBreadCrumb');
  });
 
  next();
}) 
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  state: {
    currRouteNme: String,
    oriMenuList:Array,
    menuList:Array,
    breadCrumbList:Array,
  },
 
  mutations: {
    setCurrRouteNme( state, payload ) {
      state.currRouteNme = payload.currRouteNme
    },
 
    setMenuList( state, payload) {
      state.menuList = payload.menuList
    },
 
    setOriMenuList( state, payload) {
      state.oriMenuList = payload.oriMenuList
    },
 
    setBreadCrumb( state, payload) {
      state.breadCrumbList = payload.breadCrumbList
    },
 
  },
  actions: { //因為數據是異步請求獲取的,所以改變state要通過dispatch,commit只能處理同步數據
    setMenuList ( {commit} ) {
      let menuList;
      return new Promise ( (resolve) => {
        axios(url).then( res => { //url是請求菜單數據的接口
          menuList = res.data.authList.map(({id,symbol,pId,forward,resName,isLeaf})=>{
            return {
              id,
              symbol,
              pId,
              forward,
              label:resName,
              isLeaf:isLeaf,
              icon:isLeaf == 1?'':'el-icon-goods'
            }
          });
 
          commit('setOriMenuList', {
            oriMenuList: menuList
          });
        //這邊是為了左側菜單而進行的數據處理,可忽略
        let menuTree = menuList.reduce(function (prev, item) {
            prev[item.pId] ? prev[item.pId].push(item) : prev[item.pId] = [item];
            return prev;
          }, {});
          
          for (let parentItem in menuTree) {
            menuTree[parentItem].forEach(function (item) {
                item.children = menuTree[item.id] ? menuTree[item.id] : null;
            });
          }
          
          commit('setMenuList', {
            menuList: menuTree[0]
          }); 
 
          resolve();
        })
      })
  
    },
 
    setBreadCrumb ( {commit, state} ) {
 
      let currMenuList = state.oriMenuList;
      let currMenu;
      let breadCrumbPre = [];
  
      for (let i=0; i<currMenuList.length; i++) {
          if(currMenuList[i]['symbol'] == state.currRouteNme){
            currMenu = currMenuList[i];
              let breadCrumbItem = {};
              breadCrumbItem.title = currMenuList[i].label;
              breadCrumbItem.path = '';
              breadCrumbPre.unshift(breadCrumbItem);
          }
      }
      function setBreadCrumb(menu){ //遞歸找出當前菜單的所有父親菜單
          if(menu.pId != 0){
              for (let i=0; i<currMenuList.length; i++) {
                if(currMenuList[i]['id'] == menu.pId){
                  let breadCrumbItem = {};
                  breadCrumbItem.title = currMenuList[i]['label'];
                  breadCrumbItem.path = '';
                  breadCrumbPre.unshift(breadCrumbItem);
                  setBreadCrumb(currMenuList[i])
                }
              }
          }
      }
      setBreadCrumb(currMenu);
      let index = {
          title:'首頁',
          path:''
      };
      breadCrumbPre.unshift(index);
      commit('setBreadCrumb', {
        breadCrumbList:breadCrumbPre
      })
    }
 
  }
})

“vue.js怎么實現動態面包屑”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！