Vue 侧边栏导航栏 el-menu单个item和多个item
在固钉的下面去写菜单导航栏。
<el-menu
class="aside-menu"
router
:default-active="$route.path"
:collapse="isCollapse"
background-color="#131b27"
text-color="#bfcbd9"
active-text-color="#20a0ff"
:default-active="$route.path": 当前激活菜单的index，栏目与path做了匹配就拿到了path然后激活对应的item，当前打开了哪个页面，那么就会去找item对应的index
{
path: '/home',
component: Layout,
children: [
{
path: '/home',
name: '概览',
icon: 'odometer',
meta: {title: '概览'},
component: ()=>import('@/views/home/Home.vue'),
}
]
},
（1）先获取到所有的路由规则， 在routers里面
<template><div style="height:100vh;width:100vw"><el-container style="height:100%;width:100%"><el-aside class="aside" :width="asideWidth"> <el-affix class="aside-affix" :z-index="1200"><div><el-image class="logo-image" :src="logo"></el-image><span :class="[isCollapse ? is-collapse : '']"><span class="logo-name">Kubernetes</span></span></div> </el-affix> <!--侧边导航栏--><el-menuclass="aside-menu"router:default-active="$route.path":collapse="isCollapse"background-color="#131b27"text-color="#bfcbd9"active-text-color="#20a0ff"><!--拆解路由规则，生成导航栏--><!--1.获取所有的；路由规则--></el-menu></el-aside ><el-container><el-header style="background-color:#b3c0d1">123</el-header><el-main><router-view></router-view></el-main><el-footer>123</el-footer></el-container></el-container></div></template><script>
//这里添加了一个属性routers,要去获取路由规则
import { useRouter } from 'vue-router';export default({data() {return {logo: require('../assets/k8s.png'),asideWidth: '200px',isCollapse: false,routers: []}},mounted() {//获取router中的所有路由规则this.routers = useRouter().options.routesconsole.log(this.routers)}})
</script>（2）循环item
<!--2.for循环路由规则并且拆解--><template v-for="menu in routers" :key="menu"><!--处理2长度为1的情况，如概要,什么时候展示呢？存在并且长度为1判定为1了，才会走到下面部分，所以数组可以直接使用0--><el-menu-itemclass="aside-menu-item"v-if="menu.children && menu.children.length == 1":index="menu.children[0].path"><!--下面就是要去做具体的展示 图标和名字--><el-icon><component :is="menu.children[0].icon"></component></el-icon><template #title>{{ menu.children[0].name }}</template></el-menu-item>template在vue里面是什么概念？它类似<div>，但是template不带任何的样式，它是for循环或者要去包裹一层东西，但是包裹不让带任何样式可以使用template。所以这个时候就可以使用template。卡片插槽其实用的也是template一样的逻辑。
:index="menu.children[0].path 要使用router模式的时候，要将其path传到index里面，这样每次点一个路由才会找到对应的path直接进去。如果不是router模式的话是没有用的，所以el-menu里面加了一个router。相当于帮我们封装了一层，帮我们跳转。
<el-icon>是vue的组件element，里面包了一层<component>，这是vue的能力，当时使用到哪个组件，那这里面is是一个动态值。
<el-icon><component :is="menu.children[0].icon"></component></el-icon>item名字要加上template，因为是以插槽的方式去实现的。
<template #title>{{ menu.children[0].name }}</template>到这里单个item就解决了。代码如下：
<template><div style="height:100vh;width:100vw"><el-container style="height:100%;width:100%"><el-aside class="aside" :width="asideWidth"> <el-affix class="aside-affix" :z-index="1200"><div><el-image class="logo-image" :src="logo"></el-image><span :class="[isCollapse ? is-collapse : '']"><span class="logo-name">Kubernetes</span></span></div> </el-affix> <!--侧边导航栏--><el-menuclass="aside-menu"router:default-active="$route.path":collapse="isCollapse"background-color="#131b27"text-color="#bfcbd9"active-text-color="#20a0ff"><!--拆解路由规则，生成导航栏--><!--1.获取所有的；路由规则--><!--2.for循环路由规则并且拆解--><template v-for="menu in routers" :key="menu"><!--处理2长度为1的情况，如概要,什么时候展示呢？存在并且长度为1判定为1了，才会走到下面部分，所以数组可以直接使用0--><el-menu-itemclass="aside-menu-item"v-if="menu.children && menu.children.length == 1":index="menu.children[0].path"><!--下面就是要去做具体的展示 图标和名字--><el-icon><component :is="menu.children[0].icon"></component></el-icon><template #title>{{ menu.children[0].name }}</template></el-menu-item></template></el-menu></el-aside ><el-container><el-header style="background-color:#b3c0d1">123</el-header><el-main><router-view></router-view></el-main><el-footer>123</el-footer></el-container></el-container></div></template><script>
//这里添加了一个属性routers,要去获取路由规则
import { useRouter } from 'vue-router';export default({data() {return {logo: require('../assets/k8s.png'),asideWidth: '200px',isCollapse: false,routers: []}},mounted() {//获取router中的所有路由规则this.routers = useRouter().options.routesconsole.log(this.routers)}})
</script>