美文网首页
element ui 导航栏激活状态

element ui 导航栏激活状态

作者: Clover园 | 来源:发表于2020-03-13 09:24 被阅读0次

一.首先贡献我的页面代码

 <el-menu :default-active="activeIndex" mode="horizontal"  router>
      <template v-for="item in navList">
        <el-submenu  v-if="item.children && item.children.length"  :index="item.path" :key="item.name" transfer popper-class="navDown">
          <template slot="title">{{item.label}}</template>
          <el-menu-item v-for="child in item.children" :key="child.name" style="text-align:center" :index="child.path"><i v-if="child.icon" :class="child.icon" />{{child.label}}</el-menu-item>
        </el-submenu>  
        <el-menu-item v-else :index="item.path" :key="item.name">{{item.label}}</el-menu-item>
      </template>
    </el-menu>

二.还有我的导航,目前写死数据navList,没有后端请求导航,原理一致的,定义一个这个activeInde,激活的当前菜单对应

data() {
    return {
      navList: [
        {
          label: "首页",
          path: "/msoIndex",
          name: "msoIndex"
        },
        {
          label: "我的应用",
          path: "/myApp",
          name: "myApp"
        },
        {
          label: "创建应用",
          path: "/createApp",
          name: "createApp"
        },
           {
          label: this.$t('menuList.myScene'),
          path: "/myScene",
          name: "myScene"
        },
        {
          label: "系统设置",
          path: "/systemSetting",
          name: "systemSetting",
          alien: 'center',
          children: [
            {
              label: "规则",
              path: "/ruleArrange",
              name: "ruleArrange",
              icon: "el-icon-s-tools"
            },
            {
              label: "活动",
              path: "/sceneManagement",
              name: "sceneManagement",
              icon: "el-icon-s-tools"
            },
            {
              label: "对象",
              path: "/ObjectManage",
              name: "ObjectManage",
              icon: "el-icon-s-tools"
            }

          ]
        },
        {
          label: "流程监控",
          path: "/processControl",
          name: "processControl"
        }
      ],
      activeIndex: '/' + location.hash.split('/')[1]
    }
  },

三.不是点击菜单进入url,也要高亮对应的导航菜单,必须要watch一下

  watch: {
    //监听路由
    '$route.path'(newVal, oldVal) {
      if(newVal !== oldVal){
        this.activeIndex = '/' + location.hash.split('/')[1]
      }
    },
  },

四.要想子路由也要高亮,就要配置路由的时候,放到当前菜单路由下级,这个才能对应高亮因为我用的location.hash.split('/')[1]

好了,现在应该可以了,希望能帮到你

相关文章

网友评论

      本文标题:element ui 导航栏激活状态

      本文链接:https://www.haomeiwen.com/subject/uisfshtx.html