動態麪包屑的實現

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
      }
    }
  }
}
複製代碼