vue侧边栏动态生成下级菜单的方法

<template> <div class="headBar"> <div class="title">  微商城管理后台 </div> <el-menu  class="el-menu-headBar"  mode="horizontal"  @select="handleSelect"  background-color="#000000"  text-color="#fff"  active-text-color="#ffd04b"  :unique-opened="true"  :default-active="onRoutes" router>  <template v-for="item in items" >  <template v-if="item.subs" >   <el-submenu :index="item.index">   <template slot="title" >    {{item.title}}   </template>   <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">    {{ subItem.title }}   </el-menu-item>   </el-submenu>  </template>  <template v-else>   <el-menu-item :index="item.index">   <label>{{ item.title }}</label>   </el-menu-item>  </template>  </template> </el-menu> </div></template> <script> export default { data() {  return {  activeIndex: "1",  items: [   {   icon: 'el-icon-menu',   index: '1',   title: '数据统计',   subs: [    {    index: '/monitor',    title: '客流展示'    },    {    index: '/monitor/device',    title: '设备采集'    },    {    index: '/monitor/tv',    title: '监控视频'    }   ]   },{   icon: 'el-icon-goods',   index: '/product',   title: '商品管理',   },{   icon: 'el-icon-goods',   index: '/category',   title: '类目管理',   },{   icon: 'fa fa-cart-arrow-down',   index: '/order',   title: '订单一览'   },{   icon: 'fa fa-user-o',   index: '/merchant',   title: '商家信息'   },{   icon: 'el-icon-printer',   index: '9',   title: '微商城',   subs:[    {    icon: 'el-icon-printer',    index: '/banner',    title: 'banner设置'    },{    icon: 'el-icon-printer',    index: '/decoration',    title: '首页装修'    },{    icon: 'el-icon-printer',    index: '/message',    title: '消息设置'    }   ]   },{   icon: 'el-icon-printer',   index: '10',   title: '线下店',   subs:[    {    icon: 'el-icon-printer',    index: '/device',    title: '设备管理'    },{    icon: 'el-icon-printer',    index: '/advertise',    title: '广告管理'    },{    icon: 'el-icon-printer',    index: '/version',    title: '版本管理'    }   ]   },{   icon: 'el-icon-printer',   index: '/largeUI',   title: '大屏'   },{   icon: 'el-icon-printer',   index: '/coupon',   title: '优惠券'   }  ],  } }, methods: {  handleSelect(key, keyPath) {  console.log(key, keyPath);  } }, computed:{  onRoutes(){  return this.$route.path.replace('/','');  } } }</script> <style scoped> .el-menu-headBar { width: 80%; min-width: 950px; font-size: 12px; border-bottom: 1px #000000; }  .headBar { width: 100%; height: 50px; display: flex; background-color: #000000; }  .title { background-color: #ffdb15; color: #000; height: 100%; min-width: 200px; width: 200px; display: flex; justify-content: center; align-items: center; letter-spacing: 5px; font-size: 17px; }</style>