element多层导航菜单，实现左侧导航栏点击，右侧显示对应页面

首先是.vue文件代码

<template>
  <div>
    <el-container>
      <el-aside width="240px">
        <el-menu :default-active="$route.path" class="el-menu-vertical-demo" router>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>工厂设置</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/A-Business/A-Business">商户信息</el-menu-item>
              <el-menu-item index="/B-Extension/B-Extension">推广团队</el-menu-item>
              <el-menu-item index="/C-Management/C-Management">插件管理</el-menu-item>
              <el-menu-item index="/D-customer/D-customer">我的客户</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
     
  name: "Main",
  data() {
     
    return {
     };
  },
  methods: {
     },
};
</script>

<style scoped>
.el-header {
     
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  height: 100%;
}

.el-aside {
     
  background-color: #d3dce6;
  color: #333;
  height: 100vh;
}

.el-main {
     
  background-color: #e9eef3;
  color: #333;
}
</style>

router文件夹中的index.js代码

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [{
     
	// 首页面
	path: '/Home/Home',
	component: () => import('../views/Home/Home.vue'),
	children: [{
     
			path: "/A-Business/A-Business",
			component: () => import('../views/A-Business/A-Business.vue')
		},

		{
     
			path: "/B-Extension/B-Extension",
			component: () => import('../views/B-Extension/B-Extension.vue')
		},
		{
     
			path: "/C-Management/C-Management",
			component: () => import('../views/C-Management/C-Management.vue')
		}, {
     
			path: "/D-customer/D-customer",
			component: () => import('../views/D-customer/D-customer.vue')
		},

	]
}, ]
const router = new VueRouter({
     
	mode: 'hash',
	base: process.env.BASE_URL,
	routes
})
export default router

最终效果