zoukankan      html  css  js  c++  java
  • vue Element UI 导航高亮

    1. activeIndex 为默认高亮值,根据改变activeIndex的值来改变高亮的值
      当页面改变的时候获取当前的路由地址,截取第一个 / 后面的值,就是当前的高亮值了
      为什么要截取呢?
      因为点到子集页面的时候,刷新页面找不到路由,所以在设置路由的时候就要注意了,是两层了(例如:/list/details)

    <template>
        <el-menu :default-active="activeIndex" class="el-menu-demo headnav" mode="horizontal" router>
          <el-menu-item v-for="(item,index) in nav" :index="item.path">{{item.title}}</el-menu-item>
        </el-menu>
    </template>
    <script>
        export default{
            name:'Head',
            data(){
                  return{
                      activeIndex:'',
                      nav:[
                          {title:'进度管理',path:'/projectlist'},
                          {title:'采集监控',path:'/controlList'},
                          {title:'任务管理',path:'/tasklist'},
                      ]
                  }
              },
              mounted(){
                    this.activeIndex = "/"+this.$route.path.split("/")[1];
              }
        }
    </script>
    
  • 相关阅读:
    POJ 2251 Dungeon Master
    POJ1321棋盘问题
    CODE[VS] 1003 电话连线
    CCF-201412-1-门禁系统
    CCF-201412-2-Z字形扫描
    为什么要用补码
    CCF-201409-1-相邻数对
    CCF-201409-2-画图
    CCF-201403-1-相反数
    CCF-201403-2-窗口
  • 原文地址:https://www.cnblogs.com/Kyaya/p/10697607.html
Copyright © 2011-2022 走看看