Vue集成Element UI
Element UI后台管理系统主要的标签
- el-container:构建整个页面框架。
- el-aside：构建左侧菜单
- el-menu：左侧菜单内容，常用属性
- :default-openeds：默认展开的菜单，通过菜单的index值来关联
- ：default-active:默认选中的菜单，通过菜单的index值来关联。
- el-submenu：可以展开的菜单、常用属性
- index：菜单的下标，文本类型，不能是数值类型
- template：对应el-submenu的菜单名
- i：设置菜单图标，通过class属性
- el-icon-message
- el-icon-menu
- e-icon-setting
- el-menu-item：设置菜单的子节点，不可再展开，常用属性
- index：菜单的下标，文本类型，不能是数值类型
Vue router 来动态构建左侧菜单
1、<el-menu>标签添加router属性
2、在页面中添加<router-view>标签，它是一个容器，动态渲染你选择的router
3、item2.path代表要跳转的页面
<el-menu router>
<el-submenu v-for="(item,index) in $router.options.routes" :index="index+''">
<template slot="title"><i class="el-icon-message"></i>{{item.name}}</template>
<el-menu-item v-for="(item2,index2) in item.children" :index="item2.path"
:class="$route.path==item2.path? 'is-active':''">{{item2.name}}</el-menu-item>
</el-submenu>
</el-menu>
路由设置
routes: [
{
path:'/',
name:'导航1',
redirect:"page1",
component:Index,
children:[
{
path:'/page1',
name:'页面1',
component:PageOne
},
{
path:'/page2',
name:'页面2',
component:PageTwo
}
]
},
{
path:'/navigation',
name:'导航2',
component:Index,
children: [
{
path:'/page3',
name:'页面3',
component:PageThree
},
{
path:'/page4',
name:'页面4',
component:PageFour
}
]
}
]
