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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM