element-ui 面包屑和导航关联的实现

初次使用element-ui制作点击菜单，面包屑动态改变，开始用的方法比较麻烦，后来发现通过element-ui的menu组件的@select方法可以传递路径参数，就豁然开朗，和大家分享一下。
1.制作面包屑组件breadcrumb.vue

<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item>
    <el-breadcrumb-item v-for="list in currentPath" >{{list}}</el-breadcrumb-item>
  </el-breadcrumb>
</template>
<style>


</style>
<script>
    export default{
        data(){
            return {}
        },
       props:['currentPath']
    }
</script>

2.父组件传递导航选中后的参数currentPath；

//Menu.vue  =》导航组件：
<template>
    <div>
      <template v-for="list in this.menuList" >
<!--组件在封装时需要传index ，index值为你的当前页面的名称eg（:index='菜单管理'    ！！！！！这里为关键点）  -->
        <el-submenu index="1" v-if="list.children.length>0" :key="list.resourceId" :index="list.resourceName"  >
          <template slot="title"  style="padding-left:10px" >
            <i class="el-icon-menu"></i>
            <span slot="title">{{ list.resourceName}}</span>
          </template>
          <Menu :menuList="list.children"></Menu>
        </el-submenu>
        <el-menu-item v-else :index="list.resourceName"  :key="list.resourceId" style="padding-left: 50px;" @click="changeRoute(list.resourceName)" >
          <span>{{list.resourceName}}</span>
        </el-menu-item>
      </template>
    </div>
</template>

//父组件template 部分；注：handleMenuSelect 不用传参，el-menu组件会自动获取参数

<el-menu
               class="el-menu-vertical-demo"
               :collapse="isCollapse"
               background-color="rgb(73, 80, 96)"
               text-color="rgba(255,255,255,0.7)"
               unique-opened
               @select="handleMenuSelect"
      >


  <Menu :menuList="this.menuList"></Menu> 
</el-menu>
...
 <breadcrumbNav :currentPath="breads"></breadcrumbNav>
...

//父组件script部分
 import breadcrumbNav from './main-components/breadcrumb.vue';//面包屑
 import Menu from './main-components/Menu .vue';//面包屑
 export default{
        data(){
            return {
              breads:[],
            }
        },
        methods:{
           handleMenuSelect(index,indexPath){
              this.breads=indexPath;
          }
        },
   components:{
          Menu,
          breadcrumbNav
        }
    }