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

背景

在做一个侧边栏导航时，发现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.实际效果

4.潜在的问题

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