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

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

 1 <template>
 2     <!-- 自定义报表 - 左侧导航 -->
 3     <div class="customNav">
 4         <div class="pic">
 5             <img src="./images/pic.png" alt="">
 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                 pathName: ''
50             }
51         },
52         mounted() {
53             this.pathName = this.$router.history.current.path;
54             this.pathName = this.pathName === '/' ? '/dataSource' : this.pathName;  // 默认路由
55             this.highLightLeftNav();
56         },
57         watch: {
58             // 监听 url 的变化
59             $route(to, from) {
60                 this.pathName = to.path;
61                 this.highLightLeftNav();
62             }
63         },
64         methods: {
65             // 点击一级导航
66             changeFirstLevel(index,e) {
67                 this.secondIndexCur = -1;
68                 this.firstIndexCur = index;
69             },
70             // 点击二级导航
71             changeSecondLevel(index, sonIndex, e) {
72                 this.firstIndexCur = -1;
73                 this.secondIndexCur = index + ',' + sonIndex;
74             },
75             // 刷新页面时根据url高亮左侧导航选项
76             highLightLeftNav() {
77                 this.firstIndexCur = -1;
78                 this.secondIndexCur = -1;
79                 this.customNav.forEach((item, index) => {
80                     if(this.pathName.indexOf(item.pathUrl) !== -1) {
81                         this.firstIndexCur = index;
82                         return;
83                     }else if(item.secondLevelNavList.length){
84                         item.secondLevelNavList.forEach((sonItem, sonIndex) => {
85                             if(this.pathName.indexOf(sonItem.pathUrl) !== -1) {
86                                 this.secondIndexCur = index + ',' + sonIndex;
87                                 return;
88                             }
89                         }); 
90                     }
91                 });
92             },
93         }
94     }
95 </script>
96 
97 <style lang="scss" type="text/css" scoped>

View Code

 

转载于:https://www.cnblogs.com/carriezhao/p/11058756.html