功能： 1、背景色/文字颜色/当前激活菜单的文字颜色可根据api中配置（被选中项的背景颜色根据less配置） 2、router属性结合路由使用 3、刷新页面导航选中项与路由一致 4、用v-for优化 （一般用 $router.options.routes，不用重复在data中配置）
<template>
<div class="wrap-page">
<div class="top">
<div class="logo fl">
<i class="el-icon-star-off"></i>
<span>项目名称</span>
</div>
</div>
<div class="main">
<div class="menu fl">
<!--导航：1、背景色/文字颜色/当前激活菜单的文字颜色可根据api中配置（被选中项的背景颜色根据less配置） 2、router属性结合路由使用 3、刷新页面导航选中项与路由一致 4、用v-for优化 -->
<!--优化前-->
<!-- <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"-->
<!-- :default-active="$route.path"-->
<!-- router-->
<!-- background-color="#2c3446"-->
<!-- text-color="#ccc"-->
<!-- active-text-color="#fff"-->
<!-- :collapse="isCollapse">-->
<!-- <el-menu-item index="/monitor">-->
<!-- <i class="el-icon-s-home"></i>-->
<!-- <span slot="title">实时监控</span>-->
<!-- </el-menu-item>-->
<!-- <el-submenu index="/infosearch">-->
<!-- <template slot="title">-->
<!-- <i class="el-icon-s-platform"></i>-->
<!-- <span slot="title">情报查询</span>-->
<!-- </template>-->
<!-- <el-menu-item index="/infosearch/ioc">-->
<!-- <i class="circle"></i>-->
<!-- <span>IOC查询</span>-->
<!-- </el-menu-item>-->
<!-- <el-menu-item index="/infosearch/safetynotice">-->
<!-- <i class="circle"></i>-->
<!-- <span>安全通告</span>-->
<!-- </el-menu-item>-->
<!-- </el-submenu>-->
<!-- <el-menu-item index="/informanage">-->
<!-- <i class="el-icon-menu"></i>-->
<!-- <span slot="title">情报管理</span>-->
<!-- </el-menu-item>-->
<!-- </el-menu>-->
<!--优化后-->
<el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
:default-active="$route.path"
router
background-color="#2c3446"
text-color="#ccc"
active-text-color="#fff"
:collapse="isCollapse">
<!-- <template v-for="(item,index) in $router.options.routes">-->
<template v-for="(item,index) in routesData[0].children">
<el-menu-item :index="`/${item.path}`" v-if="!item.isParent">
<i :class="item.iconClass"></i>
<span slot="title">{{item.title}}</span>
</el-menu-item>
<el-submenu :index="`/${item.path}`" v-else>
<template slot="title">
<i :class="item.iconClass"></i>
<span slot="title">{{item.title}}</span>
</template>
<template v-for="d in item.children">
<el-menu-item :index="`/${item.path}/${d.path}`">
<i :class="d.iconClass"></i>
<span>{{d.title}}</span>
</el-menu-item>
</template>
</el-submenu>
</template>
</el-menu>
</div>
<div class="content fl">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Nav",
data() {
return {
isCollapse: false,
//一般用 $router.options.routes，不用重复配置
routesData: [
{
path: '/',
name: 'Nav',
redirect: '/monitor',
component: () => import('../views/Nav'),
children: [
{
path: 'monitor',
name: 'monitor',
component: () => import('../components/nav/monitor'),
isParent: false,
title: '实时监控',
iconClass: 'el-icon-s-home'
},
{
path: 'infosearch',
name: 'infosearch',
component: () => import('../components/nav/infosearch'),
isParent: true,
title: '情报查询',
iconClass: 'el-icon-s-platform',
children: [
{
path: 'ioc',
name: 'ioc',
component: () => import('../components/nav/ioc'),
isParent: false,
title: 'IOC查询',
iconClass: 'circle',
},
{
path: 'safetynotice',
name: 'safetynotice',
component: () => import('../components/nav/safetynotice'),
isParent: false,
title: '安全通告',
iconClass: 'circle',
},
]
},
{
path: 'informanage',
name: 'informanage',
component: () => import('../components/nav/informanage'),
isParent: false,
title: '情报管理',
iconClass: 'el-icon-menu',
},
]
},
]
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
<style lang="less" scoped>
.wrap-page {
width: 100%;
height: 100%;
.fl {
float: left;
}
.circle {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: #666;
}
.top {
height: 60px;
background-color: #2c3446;
.logo {
width: 200px;
height: 100%;
line-height: 60px;
text-align: center;
background-color: #354058;
color: #fff;
font-size: 22px;
}
}
.main {
height: calc(~'100% - 60px');
.menu {
width: 200px;
height: 100%;
background-color: rgb(44, 52, 70);
}
.content {
width: calc(~'100% - 200px');
height: 100%;
}
}
/*方式一：全部在less中配置menu样式*/
/*.el-menu {*/
/* background: #2c3446;*/
/* .el-menu-item.is-active {*/
/* background: #000;*/
/* }*/
/* !*无子项 *!*/
/* .el-menu-item {*/
/* color: #ccc;*/
/* &:focus, &:hover {*/
/* background: #000;*/
/* color: #fff;*/
/* i {*/
/* color: #fff;*/
/* }*/
/* .circle {*/
/* background: #fff;*/
/* }*/
/* }*/
/* i {*/
/* color: #ccc;*/
/* }*/
/* }*/
/* !*有子项 *!*/
/* .el-submenu {*/
/* /deep/ .el-submenu__title {*/
/* color: #ccc;*/
/* &:hover {*/
/* background: #000;*/
/* color: #fff;*/
/* i {*/
/* color: #fff;*/
/* }*/
/* }*/
/* i {*/
/* color: #ccc;*/
/* }*/
/* }*/
/* /deep/ ul.el-menu {*/
/* background-color: transparent;*/
/* }*/
/* }*/
/*}*/
/*方式二：api结合less中配置menu样式*/
.el-menu-item.is-active {
background: #000 !important;
}
}
</style>
