Vue+elementUI动态菜单

<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'  }