动态面包屑的实现

PC端的后台管理系统中，常常会用到面包屑。我的理解：在PC端，面包屑的功能是展现系统的结构（即我在哪），而不是访问历史。

思路：

• 将全部页面中的面包屑字段封装在一个对象A中
• 定义路由的同时引入此对象，建立相应的字段
• 经过状态管理的mutations定义方法，将相对应的面包屑字段赋值给status中的某一属性
  
• 路由全局前置守卫

一、breadCrumb-data.js文件存储对象A

const routerBreadcrumb = {
  crumb: {
    crumb01: [
      {
        name: '首页',
        path: '/HelloWorld'
      },
      {
        name: '面包屑',
        path: '/breadcrumb'
      }
    ],
    crumb02: [
      {
        name: '首页',
        path: '/HelloWorld'
      },
      {
        name: '面包屑1级',
        path: '/breadcrumb'
      },
      {
        name: '面包屑2级',
        path: '/breadcrumb01'
      }
    ]
  }
}
export {routerBreadcrumb}复制代码

二、定义路由是增长meta中的list字段存储该页面中须要的面包屑数据

{
  path: '/breadcrumb',
  name: 'breadcrumb',
  component: breadcrumb,
  meta: {
    list: routerBreadcrumb.crumb.crumb01
  }
}复制代码

三、路由全局前置守卫

router.beforeEach((to, from, next) => {
  if (to.meta.list) {
    let list = to.meta.list
    store.commit('changeBreadcumb', { list })
  }
  next()
})
复制代码

四、状态管理中定义的方法和属性

const store = new Vuex.Store({
  state: {
    breadcumb: []
  },
  mutations: {
    changeBreadcumb (state, value) {
      this.state.breadcumb = value
    }
  }
})复制代码

五、面包屑组件

<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item
     v-for="(item, key) in breadcumb.list"
     :key="key"
     :to="{ path: item.path }">
        {{item.name}}
    </el-breadcrumb-item>
</el-breadcrumb>
export default {
  name: 'breadcrumbCom',
  data () {
    return {    }
  },
  computed: {
    breadcumb: {
      get () {
        return store.state.breadcumb
      }
    }
  }
}
复制代码