一、menu模块
<Menu
ref="leftmenu"
@on-select="selectItem"
@on-open-change="isCollapsed=false"
:active-name="activeName"
theme="dark"
width="auto"
:accordion="true"
:open-names="opennames"
:class="menuitemClasses">
<!-- 静态菜单 -->
<MenuItem name="0-1" to="/">
<Icon type="ios-briefcase-outline"></Icon>
<span>案例</span>
</MenuItem>
<Submenu name="1">
<template slot="title">
<Icon type="ios-eye-outline"></Icon>
<span>监控列表</span>
</template>
<MenuItem name="1-1" to="/monitor/elasticComputeCloudMonitor">EC2</MenuItem>
<MenuItem name="1-2" to="/monitor/elasticBlockStoreMonitor">EBS</MenuItem>
<MenuItem name="1-3" to="/monitor/billingMonitor">财务</MenuItem>
<MenuItem name="1-4" to="/monitor/logMonitor">日志</MenuItem>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-construct-outline"></Icon>
<span>配置管理</span>
</template>
<MenuItem name="2-1" to="/configurationManagement/systemTask">定时任务配置</MenuItem>
</Submenu>
<MenuItem name="0-2" to="/alarmContact">
<Icon type="ios-people-outline"></Icon>
<span>报警联系人</span>
</MenuItem>
<MenuItem name="0-3" to="/accounts">
<Icon type="ios-contacts-outline"></Icon>
<span>账户</span>
</MenuItem>
<MenuItem name="0-4" to="/user" v-show="showUser">
<Icon type="ios-contacts-outline"></Icon>
<span>用户管理</span>
</MenuItem>
</Menu>
二、定义模块
data () {
return {
opennames:[],
activeName:'',
isCollapsed: false,
showUser:false
};
三、解决刷新收缩导航栏以及刷新高亮
created(){
if(this.$route.meta && this.$route.meta.order){
// 当前高亮
this.activeName = this.$route.meta.order;
// 刷新后二级菜单收缩问题
var submenuname=this.$route.meta.order.split('-')[0];
if(submenuname!=="0"){
this.opennames.push(submenuname);
}
}
},
watch:{
// 收缩
isCollapsed(val){
if(val){
this.opennames=[];
this.$nextTick(()=>{
this.$refs.leftmenu.updateOpened();
});
}
}
},
computed: {
menuitemClasses: function () {
return [
'menu-item',
this.isCollapsed ? 'collapsed-menu' : ''
]
}
},
methods:{
selectItem:function(name){
this.isCollapsed=false;
if(name.startsWith('0')){
this.opennames=[];
this.$nextTick(()=>{
this.$refs.leftmenu.updateOpened();
});
}
}
}
四、路由模块
export const constantRouterMap=[
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/register',
name: 'Register',
component: Register
},
{
path: '/',
component: Main,
children:[
{
path: '',
component: Case,
type:'ios-briefcase-outline',
meta: {
title:'案例',
order:"0-1",
requireAuth: true
}
},
{
path: '/caseDetail',
name: 'CaseDetail',
component: CaseDetail,
meta: {
title:'案例',
order:"0-1",
requireAuth: true
}
}
]
},
{
path:'/monitor',
component: Main,
type:"ios-eye-outline",
meta: {
title:'监控列表',
order:"1",
requireAuth: true
},
children:[
{
path: '/monitor/elasticComputeCloudMonitor',
component: ElasticComputeCloudMonitor,
meta: {
title:'EC2',
order:"1-1",
requireAuth: true
}
},
{
path: '/monitor/elasticBlockStoreMonitor',
component: ElasticBlockStoreMonitor,
meta: {
title:'EBS',
order:"1-2",
requireAuth: true
}
},
{
path: '/monitor/billingMonitor',
component: BillingMonitor,
meta: {
title:'财务',
order:"1-3",
requireAuth: true
}
},
{
path: '/monitor/logMonitor',
component: LogMonitor,
meta: {
title:'日志',
order:"1-4",
requireAuth: true
}
}
]
},
{
path:'/alarmContact',
component: Main,
children:[
{
path: '/alarmContact',
component: AlarmContact,
type:'ios-people-outline',
meta: {
title:'报警联系人',
order:"0-2",
requireAuth: true
}
}
]
},
{
path:'/accounts',
component: Main,
children:[
{
path: '/accounts',
component: Accounts,
type:'ios-contacts-outline',
meta: {
title:'账户',
order:"0-3",
requireAuth: true
}
}
]
},
{
path:'/timerSwitchs',
type:'ios-stopwatch-outline',
component: Main,
meta: {
title:'定时开关机',
order:"3",
requireAuth: true
},
children:[
{
path: '/timerSwitchs/serverSearchs',
component: ServerSearchs,
meta: {
title:'查询',
order:"3-1",
requireAuth: true
}
}
]
},
{
path:'/auditTask',
component: Main,
children:[
{
path: '/auditTask',
component: AuditTask,
type:'ios-clipboard-outline',
meta: {
title:'审核任务',
order:"0-5",
requireAuth: true
}
}
]
},
{
path:'/configurationManagement',
type:'ios-briefcase-outline',
component: Main,
meta: {
title:'配置管理',
order:"2",
requireAuth: true
},
children:[
{
path: '/configurationManagement/systemTask',
component: SystemTask,
meta: {
title:'定时任务配置',
order:"2-1",
requireAuth: true
}
}
]
},
{
path:'/user',
component: Main,
children:[
{
path: '/user',
component: Users,
type:'ios-contacts-outline',
meta: {
title:'用户管理',
order:"0-4",
requireAuth: true
}
}
]
}
]
export default new Router({
routes: constantRouterMap
})