初次使用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
}
}