递归(+element)嵌套实现侧边栏

<el-aside width="200px" height="100%">
    <Menu :Datamenu="Datamenu"></Menu>
</el-aside>

<script>
import Menu from "@/components/page/Menu.vue";
export default {
    name: "home",
    components: {
        Menu
    },
    data() {
        return {
            Datamenu: [{
    name: "About",
    path: "/about",
    id: 1,
    children: [{
    name: "About US",
    path: "/about/us",
    id: 3
    },
     {

            }]
    }]

<template>
  <el-menu
    unique-opened="true"
    background-color="#373d41"
    text-color="#fff"
    active-text-color="#FF4500"
  >
    <template v-for="item in Datamenu">
    <!--如果有孩子-->
      <el-submenu :key="item.id" :index="item.id" v-if="item.children">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title" style="padding-left:10px;">{{item.name}}</span>
        </template>
      <!--递归-->
        <Menu :Datamenu="item.children"></Menu>
      </el-submenu>
      <!--如果没有孩子-->
      <el-menu-item v-else :key="item.id" :index="item.id">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{item.name}}</span>
        </template>
      </el-menu-item>
    </template>
  </el-menu>
  
</template>
<script>
export default {
  name: "Menu",
  props: ["Datamenu"],
  data() {
    return {};
  },
  methods: {}
};
</script>