element-ui面包屑的实现(可适用于嵌套路由)

  • Post author:
  • Post category:其他




别方,先看一下效果~

在这里插入图片描述



接下来是实现的方式


思路

  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))
    })
  }



版权声明:本文为qq_42832446原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。