VUE之动态路由多级菜单的实现（iview框架）

菜单组件: 文件一sidebar.vue

<template>
  <div class="sidebar">
      <Menu theme="dark"  accordion >
       <Menutree :routes='menuRouter'></Menutree>
     </Menu>
  </div>
</template>
<script>
import Menutree from './Menutree';
export default {
  name: 'dpsidebar',
  components: { Menutree },
  computed: {
    menuRouter(){
      return this.$store.getters.dpmenus
    }
  },
}

文件一Menutree.vue

<template>
  <div>
        <div v-for="item in routes" :key="item.path">
        <Submenu :name="item.name" v-if="item.children&&item.children.length>0" >
          <template slot="title">
                        {{item.name}}
          </template>
        <menuTree  :routes="item.children"></menuTree>
      </Submenu>
      <MenuItem :name="item.name" v-if="!item.hidden&&!item.children">{{item.name}}</MenuItem>
    </div>
    </div>
</template>

<script>
export default {
  name: "menuTree",
  props: {
    routes: {
      type: Array
    }
  },
  methods: {
    handleClick(e) {
      e.preventDefault();
      e.target.parentElement.classList.toggle("open");
    },
    addActive(e) {
      e.preventDefault();
      e.target.parentElement.parentElement.parentElement.classList.add("open");
      this.$store.commit('SET_TABLIST', this.$route)
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.wscn-icon {
  margin-right: 10px;
}
.hideSidebar .menu-indent {
  display: block;
  text-indent: 10px;
}
.col-input {
  width: 150px;
  border-radius: 20px;
  margin: 3px;
  margin-left: 20px;
  position: relative;
}
.lis {
  list-style: none;
}

.refresh {
  position: absolute;
  top: 5px;
  left: -13px;
  font-size: 26px;
}
.router {
  transform: rotate(720deg);
  transition-duration: 3s;
}
.color {
  font-weight: 400;
  background-color: #3B5991 !important;
  color: #F8B500 !important;
}
/deep/ .ivu-input-wrapper-small .ivu-input-icon {
    width: 24px;
    font-size: 18px;
    height: 24px;
    line-height: 24px;
    transform: translateY(2.5px);
  }
</style>

原理组件自己循环调用自己