©2020-2024 ioDraw All rights reserved
@效果图
<>导航菜单
<!--导航菜单--> <el-menu router :default-active="$route.path" v-show="!collapsed"
unique-opened> <!-- 左侧导航栏抽取循环部分 将路由列表传给子组件--> <asideBarItem
v-for="(router,index) in $router.options.routes" :router="router"
:index="index" :key="index" v-if="!router.hidden" > </asideBarItem> </el-menu>
<>asideBarItem组件封装
<template> <div class="asideBarItem-container"> <el-submenu :index="index+''"
v-if="!router.hidden&&router.children&&router.children.length>0"> <span
slot="title"><i :class="router.iconCls"></i>{{router.name}}</span>
<asideBarItem v-for="(child, childKey) in router.children" :key="child.path"
:router="child" :index="index+'-'+childKey"></asideBarItem> </el-submenu>
<el-menu-item
v-if="!router.hidden&&(!router.children||router.children.length==0)"
:key="router.path" :index="router.path"> <span slot="title"><i
:class="router.iconCls"></i>{{router.name}}</span> </el-menu-item> </div>
</template> <script> export default { name: 'asideBarItem', props: [ "router",
"index" ], components: {}, data() { return {} }, computed: {}, watch: {},
methods: {}, created() {}, mounted() {} } </script> <style lang="scss" scoped>
.asideBarItem-container { } </style>
<>路由
routes: [ { path: '/', component: List, name: '列表', //iconCls:
'el-icon-list',//图标样式class children: [ { path: '/room', component:Room, name:
'客房' ,children:[{ path: '/test', component:Test, name: '登录' }] }, { path:
'/spring', component: Spring, name: '温泉' }, { path: '/foodie', component:
Foodie, name: '餐饮' } ] }， { path: '/login', component: Login, name: 'Login',
hidden: true } ]