@ design sketch
<> Navigation menu
<!-- Navigation menu --> <el-menu router :default-active="$route.path" v-show="!collapsed"
unique-opened> <!-- The left navigation bar extracts the loop section Pass the routing list to the subcomponent --> <asideBarItem
v-for="(router,index) in $router.options.routes" :router="router"
:index="index" :key="index" v-if="!router.hidden" > </asideBarItem> </el-menu>
<>asideBarItem Component encapsulation
<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>
<> route
routes: [ { path: '/', component: List, name: ' list ', //iconCls:
'el-icon-list',// Icon style class children: [ { path: '/room', component:Room, name:
' Guest Room ' ,children:[{ path: '/test', component:Test, name: ' Sign in ' }] }, { path:
'/spring', component: Spring, name: ' hot spring ' }, { path: '/foodie', component:
Foodie, name: ' Restaurant ' } ] }, { path: '/login', component: Login, name: 'Login',
hidden: true } ]
Technology