官方文档https://element.eleme.cn/#/zh-CN/component/menu
官方使用
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
<script>
export default {
data() {
return {
activeIndex: '1',
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
项目实例
-
使用
<router-view></router-view>
进行路由跳转,实现在外层写导航,点击导航跳转不同页面。 -
router属性
:启用该模式会在激活导航时以 index 作为 path 进行路由跳转
<template>
<div class="policy-home">
<div class="policyNav">
<el-menu :default-active="activeIndex"
background-color="#486DC0"
text-color="#FFFFFF"
active-text-color="#FFF000"
class="el-menu-demo"
mode="horizontal"
:router="true">
<el-menu-item index="/policyjisuan">政策计算器</el-menu-item>
<el-menu-item index="/searchP">检索</el-menu-item>
<el-menu-item index="/policyStoreGraphic">政策图解</el-menu-item>
<el-menu-item index="/applyNews">今日申报</el-menu-item>
<el-menu-item index="/original">政策原文</el-menu-item>
</el-menu>
</div>
<div class="navContent">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeIndex: '/policyjisuan',
};
},
watch: {
// 监听路由变化
'$route.path': {
handler (routePath) {
this.initMenuActive(routePath)
},
immediate: true
}
},
methods: {
initMenuActive (routePath) {
//路由跳转时,标记在导航的哪个选项下对应的路由,css高亮显示
if (routePath == '/loginPolicy') {
this.activeIndex = '/policyjisuan'
} else if(routePath == '/searchDetail'){
this.activeIndex = '/searchP'
} else if(routePath == '/applyDetail'){
this.activeIndex = '/applyNews'
} else if(routePath == '/calculateDetail'){
this.activeIndex = '/policyjisuan'
} else if(routePath == '/companyDetail'){
this.activeIndex = '/policyjisuan'
} else if(routePath == '/originalDetail'){
this.activeIndex = '/original'
} else {
this.activeIndex = routePath
}
},
}
}
</script>
<style lang="scss" scoped>
/* 导航下页面 */
.navContent {
min-height: 800px;
padding-bottom: 70px;
background-color: #fff;
}
.policyNav {
.el-menu-item {
text-align: center;
border-bottom: none;
width: 16%;
font-size: 22px;
font-weight: 500;
background-color: #486DC0 !important;
}
.el-menu {
background-color: #486DC0 !important;
}
}
</style>
路由配置:
js文件
export default [
{
path: '/policyStoreIndex',
name: '政策计算器导航页',
redirect: '/policyjisuan',
component: () =>
import(/* webpackChunkName: "page" */ '@/views/home/policyStoreIndex'),
meta: {
keepAlive: true,
isTab: false,
isAuth: false
},
children: [
{
path: '/searchP',
name: '检索',
component: () =>
import(/* webpackChunkName: "page" */ '@/views/home/policyStoreNew/searchP'),
meta: {
keepAlive: true,
isTab: false,
isAuth: false
}
}]
}
]
导航下面为每个页面不同的内容(省略)