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