vue.js实现动态面包屑

最近在学习vue，正好手上有个项目还是用jquery写的，就自己尝试将这个项目的前端用vue实现，途中遇到了动态面包屑的问题，特此记录一下，如有不对的地方，欢迎指正.

需求描述:

点击左侧的导航,跳转到不同的页面,并且根据导航的路径,动态生成面包屑.面包屑的数据均来自于左侧的导航.

思路:

1.面包屑作为一个单独的组件,在页面中引入.页面的结构如下:

2.面包屑组件的实现:

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 
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。