npm install e-side-menu
import sideMenu from "e-side-menu";
Vue.use(sideMenu);
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" /*可选*/
}
},
]
}
]
<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>