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-menu
class="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.routes
console.log(this.routers)
}
})
</script>（2）循环item
<!--2.for循环路由规则并且拆解-->
<template v-for="menu in routers" :key="menu">
<!--处理2长度为1的情况，如概要,什么时候展示呢？存在并且长度为1
判定为1了，才会走到下面部分，所以数组可以直接使用0-->
<el-menu-item
class="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-menu
class="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-item
class="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.routes
console.log(this.routers)
}
})
</script>