VUE 路由菜单

依赖:element-ui muse-ui

在html中添加 material-icons

<link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">

图标使用的就是material-icons

素有图标列表 https://material.io/tools/icons/?style=baseline

使用方式：读取所有路由

        <el-menu>
            <fbi_routersidebaritem v-for="route in this.$router.options.routes" :key="route.path" :item="route"></fbi_routersidebaritem>
        </el-menu>

然后再路由中设置

    {
        path:'/',
        name:'home',
        redirect:'/user/index',
        meta:{title:"网站首页",icon:"home",hidden:false},
    }

如果没有meta的 或者hidden等于true 的项目不会自动显示

使用方式:指定根目录

        <el-menu>
            <fbi_routersidebaritem v-for="route in this.$router.options.routes.find(it=>it.name=='user').children" :key="route.path" :item="route" parentdir="user" ></fbi_routersidebaritem>
        </el-menu>

这里指定了根目录，会从根目录开始读取路由，并且跳过跟目录，比如路由是这样的

    {
        meta:{title:"用户中心",icon:"home"},
        path: '/user',
        redirect:'/user/index',
        name: 'user',
        component: ()=>import('@/views/users/layout.vue'),
        children:[
            {
                meta:{title: '用户主页',icon:"home",role:2},
                path: 'index',
                name: 'index',
                component: ()=> import('@/views/users/index.vue'),
            },
            {
                meta:{title: '联系客服',icon:"home",role:2},
                path: 'kf',
                name: 'kf',
                component: ()=> import('@/views/users/kf.vue'),
            }
        ]
     }

他这时候菜单就是

用户主页 客服