博客

别方，先看一下效果~

接下来是实现的方式

思路

：

1. 首先在路由的meta中设置breadNumber字段，‘一级页面’不设置breadNumber（因为大部分页面是一级页面，所以就不设置了~），‘二级页面’设置breadNumber=2，‘三级页面’设置breadNumber=3，以此类推…
2. 在面包屑的页面监听路由，路由变化时则触发面包屑数据处理事件，数据处理详细在getBreadcrumb方法
3. 面包屑数据处理完成后，要做刷新页面时缓存数据的操作（这里是用vuex配合sessionStorage来实现）

直接贴一下代码~

路由配置页面

export default new Router({
  mode: 'history',
  routes: [ {
      path: '',
      component: Sidebar,
      children: [
        {
          path: '/tenant',
          component: TenantManagement,
          name: '租户管理',
          meta: {
            requireAuth: true,
          }
        },
        {
          path: '/account',
          component: AccountManagement,
          name: '账号管理',
          meta: {
            requireAuth: true,
            breadNumber: 2
          }
        },
        {
          path: '/account/addAccount',
          component: AddAccount,
          name: '创建账号',
          meta: {
            requireAuth: true,
            breadNumber: 3
          }
        }
      ]
    }
   ]
})

面包屑所在页面（Sidebar.vue）

dom代码

<!--面包屑-->
<el-breadcrumb class="breadcrumb" separator="/">
  <!--默认给一个首页的跳转，如果不需要可以去掉-->
  <el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
  <!--面包屑列表-->
  <el-breadcrumb-item
    v-for='(item,index) in breadList'
    :key='index'
    @click.native="breadcrumbClick(item)"
    v-if='item.name' style="cursor: pointer">
    {{item.name}}
  </el-breadcrumb-item>
</el-breadcrumb>

JS代码（PS:放在编辑器看好一点~）

watch监听路由改变：

watch: {
    // 监听路由的变化
    $route () {
      this.getBreadcrumb();
    }
  }

methods方法：

// 面包屑数据处理
    getBreadcrumb () {
      let that = this;
      // 由于本项目大部分属于‘一级’页面，所以在设置路由时候，一级页面不设置breadNumber = 1，‘二级’页面以上才设置breadNumber
      let breadNumber = typeof (this.$route.meta.breadNumber) !== 'undefined' ? this.$route.meta.breadNumber : 1;
      // 获取当前页面的名字和路由，并组合成新的对象
      let newBread = {name: this.$route.name, path: this.$route.fullPath};
      let vuexBreadList = []; // 默认初始化面包屑数据
      if (breadNumber !== 1) {
        // 当前面包屑breadNumber大于1时才会从vuex中获取值
        vuexBreadList = that.$store.state.breadListState; // 获取breadList数组
      }
      if (breadNumber < vuexBreadList.length) {
        // "回退"面包屑----判断条件：当前路由breadNumber小于vuexBreadList的长度
        vuexBreadList.splice(breadNumber - vuexBreadList.length, vuexBreadList.length - breadNumber);
      }
      if (breadNumber > vuexBreadList.length) {
        // 添加面包屑----判断条件：当前路由breadNumber大于vuexBreadList的长度
        vuexBreadList.push(newBread);
      }
      // 处理完数据后，将最终的数据更新到vuex（用于页面刷新）
      that.$store.commit('breadListMutations', vuexBreadList);
      // 处理完数据后，将最终的数据更新为新的面包屑数组
      that.breadList = vuexBreadList;
    },

// 面包屑点击事件
    breadcrumbClick (item) {
      this.$router.push({
        path: item.path
      })
    },

VUEX页面

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state = {
  breadListState: [] // 面包屑列表数据
};

export default new Vuex.Store({
  state,
  mutations: {
    breadListMutations (state, list) {
      state.breadListState = list;
    }
  }
});

APP.vue页面（用于页面刷新时缓存vuex数据）

created: function () {
    // 在页面加载时读取sessionStorage里的状态信息
    sessionStorage.getItem('umeetCloudVuex') && this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(sessionStorage.getItem('umeetCloudVuex'))));
    // 在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('umeetCloudVuex', JSON.stringify(this.$store.state))
    })
  }