vue+iview 静态路由 菜单栏

一、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
})