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>