vue高亮一级、二级导航

使用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上)

以下是导航组件的全部代码：

 <template>
     <!-- 自定义报表 - 左侧导航 -->
     <div class="customNav">
         <div class="pic">
             <img src="./images/pic.png" alt="">
         </div>
         <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>
     </div>
 </template>
 
 <script>
     export default {
         data() {
             return {
                 firstIndexCur: -1,   // 一级导航添加类名元素
                 secondIndexCur: -1,   // 一级导航添加类名元素
                 customNav: [{
                     name: '数据源',
                     pathUrl: '/dataSource',
                     secondLevelNavList: [{
                         name: '新建',
                         pathUrl: '/newlyBuild/addData'
                     }]
                 },{
                     name: '配置SQL',
                     pathUrl: '/configSQL',
                     secondLevelNavList: [{
                         name: '新建',
                         pathUrl: '/configNewlyBuild/addData'
                     }]
                 },{
                     name: '业务SQL',
                     pathUrl: '/businessSQL',
                     secondLevelNavList: []
                 }],
                 pathName: ''
             }
         },
         mounted() {
             this.pathName = this.$router.history.current.path;
             this.pathName = this.pathName === '/' ? '/dataSource' : this.pathName;  // 默认路由
             this.highLightLeftNav();
         },
         watch: {
             // 监听 url 的变化
             $route(to, from) {
                 this.pathName = to.path;
                 this.highLightLeftNav();
             }
         },
         methods: {
             // 点击一级导航
             changeFirstLevel(index,e) {
                 this.secondIndexCur = -1;
                 this.firstIndexCur = index;
             },
             // 点击二级导航
             changeSecondLevel(index, sonIndex, e) {
                 this.firstIndexCur = -1;
                 this.secondIndexCur = index + ',' + sonIndex;
             },
             // 刷新页面时根据url高亮左侧导航选项
             highLightLeftNav() {
                 this.firstIndexCur = -1;
                 this.secondIndexCur = -1;
                 this.customNav.forEach((item, index) => {
                     if(this.pathName.indexOf(item.pathUrl) !== -1) {
                         this.firstIndexCur = index;
                         return;
                     }else if(item.secondLevelNavList.length){
                         item.secondLevelNavList.forEach((sonItem, sonIndex) => {
                             if(this.pathName.indexOf(sonItem.pathUrl) !== -1) {
                                 this.secondIndexCur = index + ',' + sonIndex;
                                 return;
                             }
                         });
                     }
                 });
             },
         }
     }
 </script>
 
 <style lang="scss" type="text/css" scoped>