使用element-ui导航，进入对应的三级页面菜单保持点击状态

1.注意事项

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

2.使用的方法

NavMenu 导航菜单

3.项目实例

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