vue2.0 - layout组件（六）面包屑组件布局

1. 在路由表中按需添加多层嵌套关系 使用children进行添加嵌套路由 meta添加元数据
1. 1组件自行创建

import Layout from '@/layout'

{
    
    
    path: '/data',
    component: Layout,
    redirect: '/data/one',
    meta: {
    
     title: '数据管理', icon: 'el-icon-s-tools' },
    children: [
      {
    
    
        path: 'one',
        name: 'data_one',
        component: () => import('@/views/Data/one.vue'),
        // 元数据
        meta: {
    
     title: "数据管理1-1" },
      },
      {
    
    
      path: 'two',
      name: 'data_one',
      redirect: '/data/one/one', // 如果需要点击路由不是空白页(加上redirect)
      component: () => import('@/views/Data/two.vue'),
      // 元数据
      meta: {
    
     title: "数据管理1-2" },
      children: [{
    
    
        path: 'one',
        name: 'data_one_one',
        component: () => import('@/views/Data/One/one.vue'),
        // 元数据
        meta: {
    
    title: "数据管理1-2-1"}
      },
      {
    
    
        path: 'two',
        name: 'data_one_two',
        component: () => import('@/views/Data/One/two.vue'),
        // 元数据
        meta: {
    
    title: "数据管理1-2-2"}
      }]
    }]
  },

2. 面包屑组件中代码

<template>
<div class="example-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item
        v-for="(item,index) in breadList"
        :key="index"
        :to="{ path: item.path }"
      >{
    
    {
    
    item.meta.title}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>
 
<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      breadList: [] // 路由集合
    };
  },
  watch: {
    
    
    $route() {
    
    
      this.getBreadcrumb();
    }
  },
  methods: {
    
    
    isHome(route) {
    
    
      return route.name === "home";
    },
    getBreadcrumb() {
    
    
      let matched = this.$route.matched;
      //如果不是首页
      if (!this.isHome(matched[0])) {
    
    
        matched =  matched.filter(item=>{
    
    
          if(item.meta.title !== undefined){
    
    
             return item
          }
        })
        matched = [{
    
     path: "/home", meta: {
    
     title: "首页" } }].concat(matched);
      }
      this.breadList = matched
    }
  },
  created() {
    
    
    this.getBreadcrumb();
  }
};
</script>
<style lang="scss" scoped></style>

3. 注册全局组件

import Mybread from '../layout/components/Bradcrumb/index.vue'

// 全局组件
export default {
    
    
    install(Vue) {
    
    
        Vue.component('my-bread', Mybread)
    }
}

4. 入口文件main.js引入

import Component from './utils/Component.js'
Vue.use(Component)

5. 页面中使用

<template>
  <section class="app-main">
    <!-- 首页就不需要面包屑 -->
    <my-bread v-if="key != '/home'"></my-bread>
    <transition name="fade-transform" mode="out-in">
      <router-view :key="key" />
    </transition>
  </section>
</template>

<script>
export default {
    
    
  name: 'AppMain',
  computed: {
    
    
    key() {
    
    
      return this.$route.path
    }
  }
}
</script>

<style scoped>
.app-main {
    
    
  /*50 = navbar  */
  height: 100%;
  width: 100%;
  position: relative;
  overflow: auto;
}
.fixed-header+.app-main {
    
    
  padding-top: 50px;
}
</style>

<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
    
    
  .fixed-header {
    
    
    padding-right: 15px;
  }
}
</style>