Vue动态菜单
<template> <div class="sidebar">
<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157" text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
<MenuTree :menuData="this.menuData"></MenuTree>
</el-menu> </div></template>
import MenuTree from '../common/MenuTree';
export default{
data(){
return {
collapse:false,
menuData:[]
}
},props: ['apiUrl'],
computed: { onRoutes() { return this.$route.path.replace('/', ''); } },
created: function () { this.getMenu(); }, methods: { getMenu: function () { this.$axios.get('menu.json').then(response => { this.menuData = response.data; }, err => { console.log(err) }) .catch((error) => { console.log(error)}) }
}, components: { 'MenuTree': MenuTree }}
MenuTree.vue
<template> <fragment> <template v-for="menu in menuData"> <el-submenu :index="menu.index" :key="menu.index" v-if="menu.subs"> <template slot="title"> <i :class="menu.icon"></i> <span slot="title">{{menu.title}}</span> </template> <MenuTree :menuData="menu.subs"></MenuTree> </el-submenu> <el-menu-item :index="menu.index" :key="menu.index" v-else> <i :class="menu.icon"></i> <span slot="title">{{menu.title}}</span> </el-menu-item> </template> </fragment></template>
export default { props: ['menuData'], name: 'MenuTree' }