面包屑展示

<template>
  <div class="container" :class="{ shrink: sliderExpand }">
    <j-header :flag="'home'" :isSum="true" :backLastBtn="false"></j-header>
    <div class="main">
      <J-slider @getMenuItem="getMenuItem"></J-slider>
      <el-main>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item
            v-for="(item, index) in levelList"
            :key="index + '0'"
          >
            <span class="no-redirect">{{ item.title }}</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
        <transition>
          <router-view></router-view>
        </transition>
      </el-main>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import JHeader from '@/components/layout/JHeader'
import JSlider from '@/components/layout/JSlider'
export default {
  name: 'settings',
  computed: {
    ...mapState('app', ['sliderExpand', 'sidebar', 'menuList'])
  },
  components: {
    JHeader,
    JSlider,
  },
  data() {
    return {
      levelList: []
    }
  },
  methods: {
    ...mapMutations('common', ['setMenu']),
    // 点击菜单时获取的数据
    getMenuItem(val) {
      this.getlevelList(val.name)
    },
    // 获取面包屑数据
    getlevelList(name) {
      const filtered = this.filterThirdLevel(this.menuList, name)
      let list = []
      this.treeForeach(filtered, (node) => {
        if (
          !node.hasOwnProperty('level') ||
          (node.level == 3 && node.name == name)
        ) {
          list.push({ name: node.name, title: node.title })
        }
      })
      this.levelList = list
    },
    // 根据路由中的name值选出对应的数据（包含其父级、父父级，还是以树的结构展示）
    filterThirdLevel(data, targetValue) {
      return data
        .filter(function (item) {
          return (
            item.children &&
            item.children.some(function (child) {
              return (
                child.children &&
                child.children.some(function (grandchild) {
                  return grandchild.name === targetValue
                })
              )
            })
          )
        })
        .reduce(function (result, item) {
          const matchingChildren = item.children
            .filter(function (child) {
              return (
                child.children &&
                child.children.some(function (grandchild) {
                  return grandchild.name === targetValue
                })
              )
            })
            .map(function (child) {
              return {
                name: child.name,
                title: child.title,
                children: child.children
              }
            })

          if (matchingChildren.length) {
            result.push({
              name: item.name,
              title: item.title,
              children: matchingChildren
            })
          }
          return result
        }, [])
    },
    // 组装成符合面包屑循环的数据（将树结构中符合条件的数据及父级、父父级组成新的同级数组）
    treeForeach(tree, func) {
      let node,
        list = [...tree]
      while ((node = list.shift())) {
        func(node)
        node.children && list.push(...node.children)
      }
    }
  },
  mounted() {
    var name = this.$route.path.replace('/', '')
    this.getlevelList(name)
  }
}
</script>