Vue 侧边栏导航栏 el-menu单个item和多个item

news2025/3/12 22:38:39

在固钉的下面去写菜单导航栏。

<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>