ElementUI-实现二级菜单随配置文件自动渲染

不念不忘少年蓝@ 2024-03-24 17:02 18阅读 0赞

## 背景 ##

在做一个侧边栏导航时，发现UI组件需要将数据写死，后续改动十分不便，故尝试实现仅在配置文件中修改一次即可实现导航项更新的功能

## 实现 ##

### 1.router的配置信息 ###

*  总的路由存储在routes这个数组变量中；
 *  “导航一”这个路由下存在子路由，存放在其children数组中；
 *  为避免将其他没有二级目录的路由进行渲染，所以在非多级路由中增加了一个hidden属性

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Login from '../views/Login'
    import Home from '../views/Home'
    import Test1 from '../views/Test1'
    import Test2 from '../views/Test2'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        path: '/',
        name: 'Login',
        component: Login,
        hidden: true
      },
      {
        path: '/home',
        name: '导航一',
        component: Home,
        children: [
          {
            path: '/test1',
            name: '选项1',
            component: Test1
          },
          {
            path: '/test2',
            name: '选项2',
            component: Test2
          },
        ]
      },  
    ]
    
    // 实例化一个VueRouter对象
    const router = new VueRouter({
      routes
    })
    
    export default router

### 2.页面元素 ###

*  在el-menu这个最大的标签中使用router；
 *  在el-submenu组件中获取路由信息中的routes数组，遍历其中没有hidden属性的项目；
 *  在el-menu-item组件中根据所在的路由项再次遍历其子路由；
 *  这样写的好处是可以不用在侧边栏的选项上绑定事件，便于后期维护

<el-menu router>
        <el-submenu
         index="1"
         v-for="(item, index) in this.$router.options.routes"
         :key="index" 
         v-if="!item.hidden"
    >
            <template slot="title">
                <i class="el-icon-message"></i>
                <span>{
       { item.name }}</span>
            </template>
            <el-menu-item
             :index="children.path"
             v-for="(children, indexj) in item.children" 
             :key="indexj"
            >
                {
       { children.name }}
            </el-menu-item>
        </el-submenu>
    </el-menu>

### 3.实际效果 ###

![809fd71d15654204bd0ee37e6a45c0cc.png][]

### 4.潜在的问题 ###

由于同时使用了 v-if 和 v-for，所以会造成一定的性能浪费，但目前尚无很好的解决办法

[809fd71d15654204bd0ee37e6a45c0cc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/2f69118d1ed34b46a1737649c51a4529.png