element+vue之动态面包屑

实现效果

1.封装组件

1.在components下建立breadcrumb.vue 文件

2.封装breadcrumb组件

<template>
  <div style="display: inline-block" class="navigation">
    <el-breadcrumb separator="/" style="font-size: 15px">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="path">{{ parentMPName }}</el-breadcrumb-item>
      <el-breadcrumb-item v-if="ParameterName">//详情页面有的带参数需要加判断
      {{ ParameterName }}{{ title2 }}
      </el-breadcrumb-item>
      <el-breadcrumb-item v-else>{{ title }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: 'Navbar',
  props: {
    ParameterName: {
      type: String
    }
  },
  data () {
    return {
      title: '',
      title2: '',
      parentMPName: '',
      path: ''
    }
  },
  activated () {},
  created () {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb () {
      var meta = this.$route.meta
      this.title = meta.title
      this.title2 = meta.title2
      this.parentMPName = meta.parentMPName
      this.path = meta.parentPath
    }
  }
}
</script>

2.router.js文件

var router = new Router({
 routes: [{
   path: '/',
   name: 'Home',
   component: Home,
   children: [{
     path: '/',
     component: Index,
     name: 'Index',
     meta: {
      title: '首页'
     }
    },
    {
     name: 'SowDetail',
     path: '/Warehouse/components/SowDetail',
     component: () => import('@/views/Warehouse/components/SowDetail'),
     meta: {
      title: '播种墙详情',
      title2: '详情',
      parentMPName: '播种墙设置',
      parentPath: '/warehouse/sowList'
     }//三级页面带参数的详情页面
    },
   {
     path: '/QualityControl/components/RecordInfo/:hasEdit',
     component: () => import('@/views/QualityControl/components/RecordInfo'),
     name: 'RecordInfo',
     props: true,
     meta: {
      title: '接收记录',
      title2: '',
      parentMPName: '接收记录',
      parentPath: '/qualityControl/record'
     }//三级页面新增编辑页面
    },
    {
     path: '/PlanningStrategy/components/PickingOrderInfo/:hasEdit',
     component: () => import('@/views/PlanningStrategy/components/PickingOrderInfo'),
     name: 'PickingOrderInfo',
     props: true,
     meta: {
      title: '拣货路线配置',
      title2: '',
      parentMPName: '拣货路线配置',
      parentPath: '/PlanningStrategy/PickingOrder'
     }//三级页面不带参数的详情页面
    }
   ]
  },
  {
   path: '/Login',
   name: 'Login',
   component: Login
  }, {
   path: '/Error',
   name: 'Error',
   component: Error
  },

 ]
})

3.封装全局引用

主要是把全局引用的组件封装到js里 把这个js文件直接引入到main.js文件中 这样整个项目用到的全局组件就用不一个一个引入到main.js文件中了 如果不想这样 也可以直接把import breadcrumb from './components/Global/breadcrumb’引入到main.js文件中

import Vue from 'vue'

const requireComponent = require.context('./', false, /\.vue$/)

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)

  // fileName   ./G-demo.vue
  const componentName = fileName
    .replace(/^\.\//, '')
    .replace(/\.\w+$/, '')
    .split('-')
    .join('')

  Vue.component(componentName, componentConfig.default || componentConfig)
})

再把这个index.js文件引入到main.js文件中

//在main.js
import './components/Global'

4. 二级页面直接用

`  <div class="title-wrapper">
        <breadcrumb></breadcrumb>
   </div>`

5. 三级页面

//ParameterName就写你要的值
 <breadcrumb :ParameterName="ParameterName"></breadcrumb>