使用vue开发过程中有的项目会存在多级导航的情况，如下图，这种就存在了两层，那么该如何高亮一级导航，又该如何高亮二级导航这就是今天我要记录的内容。
1、高亮一级导航很简单，代码如下：
// 点击一级导航 changeFirstLevel(index,e) { this.secondIndexCur = -1; this.firstIndexCur = index; }
2、高亮二级导航，代码如下：
// view部分 <ul class="firstLevelNav"> <li v-for="(item, index) in customNav" :key="index"> <router-link :to="item.pathUrl"> <div :class="{‘cur‘: firstIndexCur == index}" @click="changeFirstLevel(index, $event)">{{item.name}}</div> </router-link> <ul class="secondLevelNav"> <li v-for="(sonItem, sonIndex) in item.secondLevelNavList" :key="sonIndex"> <router-link :to="sonItem.pathUrl"> <div :class="[secondIndexCur == index + ‘,‘ + sonIndex ? ‘cur‘ : ‘‘]" @click="changeSecondLevel(index, sonIndex, $event)">{{sonItem.name}}</div> </router-link> </li> </ul> </li> </ul> // 点击二级导航 changeSecondLevel(index, sonIndex, e) { this.firstIndexCur = -1; this.secondIndexCur = index + ‘,‘ + sonIndex; }
(注意：为什么在<router-link></router-link>中又写了一个div呢，是因为我在完成代码后点击导航高亮样式并不能成功添加，开始我是直接把class添加到了rouer-link上)
以下是导航组件的全部代码：
1 <template> 2 <!-- 自定义报表 - 左侧导航 --> 3 <div class="customNav"> 4 <div class="pic"> 5 <img src="./images/pic.png" > 6 </div> 7 <ul class="firstLevelNav"> 8 <li v-for="(item, index) in customNav" :key="index"> 9 <router-link :to="item.pathUrl"> 10 <div :class="{‘cur‘: firstIndexCur == index}" @click="changeFirstLevel(index, $event)">{{item.name}}</div> 11 </router-link> 12 <ul class="secondLevelNav"> 13 <li v-for="(sonItem, sonIndex) in item.secondLevelNavList" :key="sonIndex"> 14 <router-link :to="sonItem.pathUrl"> 15 <div :class="[secondIndexCur == index + ‘,‘ + sonIndex ? ‘cur‘ : ‘‘]" @click="changeSecondLevel(index, sonIndex, $event)">{{sonItem.name}}</div> 16 </router-link> 17 </li> 18 </ul> 19 </li> 20 </ul> 21 </div> 22 </template> 23 24 <script> 25 export default { 26 data() { 27 return { 28 firstIndexCur: -1, // 一级导航添加类名元素 29 secondIndexCur: -1, // 一级导航添加类名元素 30 customNav: [{ 31 name: ‘数据源‘, 32 pathUrl: ‘/dataSource‘, 33 secondLevelNavList: [{ 34 name: ‘新建‘, 35 pathUrl: ‘/newlyBuild/addData‘ 36 }] 37 },{ 38 name: ‘配置SQL‘, 39 pathUrl: ‘/configSQL‘, 40 secondLevelNavList: [{ 41 name: ‘新建‘, 42 pathUrl: ‘/configNewlyBuild/addData‘ 43 }] 44 },{ 45 name: ‘业务SQL‘, 46 pathUrl: ‘/businessSQL‘, 47 secondLevelNavList: [] 48 }] 49 } 50 }, 51 mounted() { 52 this.highLightLeftNav(); 53 }, 54 methods: { 55 // 点击一级导航 56 changeFirstLevel(index,e) { 57 this.secondIndexCur = -1; 58 this.firstIndexCur = index; 59 }, 60 // 点击二级导航 61 changeSecondLevel(index, sonIndex, e) { 62 this.firstIndexCur = -1; 63 this.secondIndexCur = index + ‘,‘ + sonIndex; 64 }, 65 // 刷新页面时根据url高亮左侧导航选项 66 highLightLeftNav() { 67 this.firstIndexCur = -1; 68 this.secondIndexCur = -1; 69 let pathName = this.$router.history.current.path; 70 this.customNav.forEach((item, index) => { 71 if(pathName.indexOf(item.pathUrl) !== -1) { 72 this.firstIndexCur = index; 73 }else if(item.secondLevelNavList.length){ 74 item.secondLevelNavList.forEach((sonItem, sonIndex) => { 75 if(pathName.indexOf(sonItem.pathUrl !== -1)) { 76 this.secondIndexCur = index + ‘,‘ + sonIndex; 77 console.log(‘sonIndex‘,sonIndex, sonItem, this.secondIndexCur) 78 } 79 }); 80 } 81 }); 82 }, 83 } 84 } 85 </script> 86 87 <style lang="scss" type="text/css" scoped>
原文：https://www.cnblogs.com/carriezhao/p/11058756.html
