<template lang="">
  <template v-for="(item, index) in data" :key="index + ''">
    <el-sub-menu v-if="item.children" :index="item.path" >
      <template #title>
        <el-icon><component :is="item.meta.icon" @click="msg(item)"/></el-icon>
        <span @click="msg(item)">{{ item.meta.title }}</span>
      </template>
      <Mymenu :data="item.children"></Mymenu>
    </el-sub-menu>
    <el-menu-item v-else :index="item.path"  @click="msg(item)">
      <el-icon><component :is="item.meta.icon" /></el-icon>
      <span>{{ item.meta.title }}</span>
    </el-menu-item>
  </template>
</template>
<script>
export default {
  props: ['data'],
  methods: {
    msg(i) {
      console.log(i.path)
      this.$router.push(i.path)
    },
  },
  mounted() {
    // console.log(this.$route.path)
    console.log(this.data)
    
  }
}
</script>
<style lang="scss" scoped>
:deep(.el-menu) {
  background-color: transparent;
}
</style>
