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>