一个基于elementUI二次封装的侧边菜单栏组件

一、使用说明

1、安装

npm install e-side-menu

2、在main.js中引入

import sideMenu from "e-side-menu";

3、注入全局使用

Vue.use(sideMenu);

二、定义数据源

1、fullPath参数可选填

const routers = [
    {
       path: "/welcome",
       name: "welcome",
       component: () => import ( /*webpackChunkName:"welcome"*/ "../views/Home/Welcome"),
       meta: {
           name: "首页",
           icon: "",
           fullPath: "/welcome" /*可选*/
        }
    },
    {
        path: "/manager",
        name: "manager",
        component: () =>
            import ( /*webpackChunkName:"studentManager"*/ "../views/Home/manager"),
        meta: {
            name: "管理",
            icon: "",
            fullPath: "/manager" /*可选*/
        },
        children: [{
                path: "dormitory",
                name: "dormitory",
                component:"xxxxxxxxxx",
                meta: {
                    name: "宿舍",
                    icon: "",
                    fullPath: "/manager/dormitory" /*可选*/
                }
            },
        ]
    }
]

三、嵌套在elementUI内使用

注意：数据源中如果没定义fullPath的话请把router:true属性加上并变成动态绑定

<el-menu
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    :collapse="isCollapse"
    :router="true" /*!这里!*/
>
     <elSubMenu :sideMenu="menuList"></elSubMenu> /*这是我们自己的组件*/
</el-menu>

四、选中菜单激活样式

想要动态选中激活样式请务必加上:default-active="$route.path"

<el-menu
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    :collapse="isCollapse"
    :router="true"
    :default-active="$route.path" /*!务必加上!*/
>
     <elSubMenu :sideMenu="menuList"></elSubMenu>
</el-menu>