1.注意事项

01.路由中使用了keepAlive属性，要用keepAlive：true，不能等于false，使用false页面会刷新

2.使用的方法

NavMenu 导航菜单

3.项目实例

<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}}]}]