1，项目结构

运行效果

2，在api这个文档下建menudata.js写模拟数据

export let menudata = [
    {
      path: '/',
      meta: {  // 渲染右侧区域的面包屑标题
        title: '地址',
        levelList: []
      },
      children: [
        {
          path: '/about',
          meta: {
            title: '收获地址',
            levelList: []
          }
        }
      ]
    },
    {
      path:'/dete',
      meta: {
        title: '日期组件',
        levelList: []
      },
      children: [
        {
          path: '/dete',
          meta: {
            title: '时间日期',
            levelList: []
          },
        }
      ]
    },
    {
      path:'/user',
      meta: {
        title: '日期组件',
        levelList: []
      },
      children: [
        {
          path: '/user',
          meta: {
            title: '时间日期',
            levelList: []
          },
        }
      ]
    }
];

3,新建组件layout

   组件1，AppMain

   组件2，asideBarItem

   组件3，mynav

4，AppMain里面代码

<template>
  <div class="appMain-container">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>
<script>
  export default {
    data () {
         return {
        }
     }
  }
</script>
<style scoped>
   
</style>

5，asideBarItem里面代码

<template>
  <div class="asideBarItem-contant">
    <el-submenu 
      :index="router.path"
      v-if="router.children">
      <span slot="title">{{router.meta.title}}</span>

      <!-- 递归有子孙导航组件 -->
      <asideBarItem
      v-for="child in router.children" 
      :key="child.path" 
      :router="child" >
      </asideBarItem>
    </el-submenu>

    <!-- 无子孙导航 -->
    <el-menu-item
    :key="router.path"
    :index="router.path"
    v-else>
      {{router.meta.title}}
    </el-menu-item>
  </div>
</template>

<script>
export default {
  name:'asideBarItem',
    props:{
      router:{
        type:Object,
        default(){
          return {}
        }
      }
    }
}
</script>

6，mynav里面代码

<template>
  <div class="nav-contain">
    <el-menu
      router
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <AsideBarItem v-for="router in menudata" 
        :key="router.path"
        :router="router"
      >
      </AsideBarItem>
    </el-menu>
  </div>
</template>

<script>
import AsideBarItem from './asideBarItem'
import { menudata } from "@/api/menudata";
export default {
  name: 'navs',
  components: {
    AsideBarItem
  },
  data(){
    return {
      menudata,
    }
  },
  mounted(){
    console.log(this.menudata)
  }
}
</script>

<style scope>
.nav-contain{
  text-align: left;
}
</style>

7，layout.vue组件里

<template>
  <div class="app-contain">
       <!-- 左导航 -->
    <el-container class="index-container">
      <el-aside class="layout-contant">
        <mynav></mynav>
      </el-aside>
     
      <!-- 面包屑 简化学习，暂时屏蔽 -->
      <el-main>
        <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item v-for="item in levelList" :key="item.path">
            <a :href="item.path" v-if="item.parent">{{item.meta.title}}</a>
            <span v-else>{{item.meta.title}}</span>
          </el-breadcrumb-item>
        </el-breadcrumb> -->

        <!-- 右边显示区域 -->
       <App-main></App-main>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import mynav from './components/mynav.vue'
import AppMain from './components/AppMain.vue'
export default {
    components:{
        mynav,
        AppMain
    }
}
</script>

8，router，