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>