针对系统中每个页面的面包屑导航封装成组件，并通过 prop 动态传值

原本在每个页面中都带有这么一段 代码，

封装

<template>
  <div class="BreadcrumbNavigation">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{msg}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{msgChild}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: 'BreadcrumbNavigation',
  props: ['msg', 'msgChild'],
  data () {
    return {}
  },
  methods: {}
}
</script>

在页面中调用

 

 

 

 这样方便了以后整个导航条的统一控制