Parent component Home.vue
<div id="home">
<menutree :data="menuData"></menutree>
</div>
<script>
export default {
components: {
menutree: menutree
},
data() {
return {
menuData: [],
breadcrumbText: ""
};
},
methods: {
},
mounted() {
this.menuData= JSON.parse(localStorage.getItem("menus"));
},
watch: {
//监控路由,来获取面包屑导航的值
$route(to, from) {
for (var ele of this.menuData) {
if (ele.children) {
for (var ele2 of ele.children) {
var temp = ele2.to;
if (temp === this.$route.path)
//如果有,就添加到路由列表里面去
this.breadcrumbText = ele2.name;
}
}
}
}
}
};
</script>
Subcomponent menutree.vue
<template>
<div>
<el-submenu v-for="(menu,index) in data" :key="index" :index="menu.index">
<template slot="title">
<i class="el-icon-location"></i>
<span>{
{menu.name}}</span>
</template>
<el-menu-item
v-for="(emenu,eindex) in menu.children"
:key="eindex"
:index="emenu.to"
>{
{emenu.name}}</el-menu-item>
</el-submenu>
</div>
</template>
<script>
export default {
name: "menutree",
data() {
return {
menuData: {}
};
},
props: ["data"]
};
</script>