## 运行效果：  ## 第一步：复制代码到，`components/Common/leftMenu.vue`中 ``` <template> <div> <el-menu ref="menu" mode="vertical" class="el-menu-vertical-demo" router background-color="#324057" :default-active="defaultActive" text-color="#fff" active-text-color="#e4ba55" @open="handleOpen"> <template v-for="menu in menuData"> <template v-if="menu.child"> <el-submenu :key="menu.id" :index="menu.id.toString()"> <template slot="title"> <i :class="menu.icon"></i> <span>{{ menu.title }}</span> </template> <el-menu-item-group> <el-menu-item v-for="item in menu.child" :key="item.id" :index="item.url">{{ item.title }}</el-menu-item> </el-menu-item-group> </el-submenu> </template> <template v-else> <el-menu-item :key="menu.id" :index="menu.url"> <i :class="menu.icon"></i> <span slot="title">{{ menu.title }}</span> </el-menu-item> </template> </template> </el-menu> </div> </template> <script> export default { props: ['menuData', 'menu'], data() { const path = this.defaultOpends() return { actived: '54', defaultActive: path } }, methods: { findMenuByUrl (menus, pathModule) { // 非递归方案 const queue = [...menus] let i = 0 while (i < queue.length) { const item = queue[i] if (item.url.indexOf(pathModule) !== -1) { return item.url } else if (item.child) { queue.push(...item.child) } i++ } }, defaultOpends() { const pathsArr = this.$route.path.split('/') const pathModule = ['', pathsArr[1], pathsArr[2]].join('/') const url = this.findMenuByUrl(this.menuData, pathModule) return url } }, watch: { '$route' () { this.defaultActive = this.defaultOpends() } } } </script> ``` ### 第二步：编辑`Home.vue`文件 ``` <template> <div> <el-row class="panel m-w-1280"> <el-col :span="24" class="panel-top"> <el-col :span="4"> <span class="p-l-20">后台管理系统</span> </el-col> <el-col :span="16" class="ofv-hd"> <div class="fl p-l-20 p-r-20 top-menu top-active">系统模块</div> </el-col> <el-col :span="4" class="pos-rel"> <el-dropdown @command="handleMenu" class="user-menu"> <span class="el-dropdown-link c-gra" style="cursor: default"> <span class="user-name">admin</span> <i class="el-icon-user-solid" aria-hidden="true"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="change_pwd">修改密码</el-dropdown-item> <el-dropdown-item command="logout">退出</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-col> </el-col> <el-col :span="24" class="panel-center"> <aside class="ovf-hd aside"> <leftMenu :menuData="menuData" :menu="menu" ref="leftMenu"></leftMenu> </aside> <section class="panel-c-c" :class="{ 'hide-leftMenu': hasChildMenu }"> <div class="grid-content bg-purple-light"> <el-col :span="24"> <transition name="fade" mode="out-in" appear> <router-view></router-view> </transition> </el-col> </div> </section> </el-col> </el-row> </div> </template> <script> import leftMenu from "../components/Common/leftMenu.vue"; export default { name: "Home", components: { leftMenu, }, data() { return { menuData: [ { id: 1, title: "首页", url: "", icon: "el-icon-s-home" }, { id: 2, title: "广告管理", url: "", icon: "el-icon-s-data", child: [ { id: 3, title: "广告列表", url: "/admin/list", icon: "" }, ] }, { id: 4, title: "商品管理", url: "", icon: "el-icon-s-goods", child: [ { id: 5, title: "商品列表", url: "/admin/users/list", icon: "" }, ] }, { id: 6, title: "系统配置", url: "", icon: "el-icon-s-tools", child: [ { id: 7, title: "权限规则", url: "/admin/rule/list", icon: "" }, { id: 8, title: "系统参数", url: "/admin/config/add", icon: "" }, { id: 9, title: "菜单管理", url: "/admin/menu/list", icon: "" }, ] }, ], menu: null, }; }, methods: { handleMenu(val) { switch (val) { case "logout": // 退出登录逻辑 break; case "change_pwd": // 修改密码逻辑 break; } }, }, }; </script> <style scoped> .m-w-1280 { min-width: 1280px !important; } .panel { position: absolute; top: 0px; bottom: 0px; width: 100%; height: 100%; } .panel-top { height: 60px; line-height: 60px; background: #1f2d3d; color: #c0ccda; } .p-l-20 { padding-left: 20px !important; } .c-gra { color: #c0ccda; } .user-menu { position: absolute !important; top: 0; right: 24px; } .user-name { margin-right: 6px; } .fl { float: left; } .p-r-20 { padding-right: 20px !important; } .top-active { color: #44b5df; } .top-menu:hover { cursor: pointer; background: #324057; } .top-menu:active, .left-menu:active { color: #20a0ff; } .aside { width: 220px !important; height: 100%; overflow-y: scroll !important; } .panel-center { background: #324057; position: absolute; top: 60px; bottom: 0px; overflow: hidden; } .panel-c-c { background: #f1f2f7; position: absolute; right: 0px; top: 0px; bottom: 0px; left: 220px; overflow-y: scroll; padding: 20px 20px 0; } </style> ```