element菜单栏递归渲染加router

首先建立个公共组件-左侧栏（asideMenu.vue）这个文件需要把el-menu引进来，然后他的子就单独循环
<template>
  <div class="container">
    <el-container>
      <el-header>Header</el-header>
      <el-container class="container-body">
        <el-aside class="menu-container">
          <!-- 实现菜单多级分类,这里要注意的是，如果点击全部展开，或者全部收缩，可能是index没有赋值，或者重复赋值了 -->
          <el-menu
            router
            default-active="1-1-1-1"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
            <!-- 引入组件 -->
            **<menu-tree :menuData="menuList"></menu-tree>**
          </el-menu>

        </el-aside>
        <el-main class="main-container">Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import menuTree from "./menuTree";
export default {
  components: {
    menuTree
  },
  data () {
    return {
      menuList: [
        {
          index: '1',
          path:'/test1',
          icon: 'el-icon-menu',
          name: '一级菜单01',
          children: [
            {
              index: '1-1',
              path:'/test2',
              icon: 'el-icon-film',
              name: '二级菜单01',
              children: [
                {
                  index: '1-1-1',
                  path:'/test3',
                  icon: 'el-icon-date',
                  name: '三级菜单01',
                  children: [
                    {
                      index: '1-1-1-1',
                      path:'/helloWorld',
                      icon: 'el-icon-monitor',
                      name: '四级菜单01'
                    }
                  ]
                },
                {
                  index: '1-1-2',
                  path:'/test4',
                  icon: 'el-icon-headset',
                  name: '三级菜单02'
                }
              ]
            },
            {
              index: '1-2',
              path:'/test5',
              icon: 'el-icon-data-line',
              name: '二级菜单02'
            }
          ]
        }
      ]
    }
  },
  mounted () {},
  methods: {}
}
</script>


//然后就是import menuTree from "./menuTree";的menuTree.vue这个文件
<template>
  <div>
    <template v-for="menu in this.menuData">
      <el-submenu :key="menu.index" :index="menu.path" v-if="menu.children">
        <template slot="title">
          <i :class="menu.icon"></i>
          <span slot="title">{{menu.name}}</span>
        </template>
        <el-menu-item-group>
          <menu-tree :menuData="menu.children"></menu-tree>
        </el-menu-item-group>
      </el-submenu>

      <el-menu-item :key="menu.index" :index="menu.path" v-else>
        <i :class="menu.icon"></i>
        <span slot="title">{{menu.name}}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  props: ['menuData'],
  name: 'MenuTree'
}
</script>


//最后就是在你所有的页面使用这个asideMenu的子组件就行了，就像这样
<template>
<div>
  <asideMenu></asideMenu>
</div>
</template>
<script></script>
<style></style>



无脑操作，直接复制即可使用，感谢点赞。