vue导航菜单的实现（含⼆级菜单）
<template>
<div class="nav">
<div class="nav-a">
<ul class="nav-a-ul">
<li class="nav-a-li" :class="classA == index ? 'active' : '' "  @click="selected(index)"  v-for="(item,index) in configNav">
<router-link :to='item.path' class="nav-a-text" @click="showToggle(index)">{{item.name}}</router-link>
<ul class="menu_ul" :class="{'active' :index===isShow}">
<li class="menu_li" v-for = "nav in item.subItems" :class="classB == nav ? 'active' : '' "  @click="menuselected(nav)">
<router-link class="menu_ul_text" :to="nav.link" :class="{'active':nav.link == linkClick}"  @click = "treeN
avSwitch(nav)"> {{}}</router-link>
</li>
</ul>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "Header",
data() {
return {
show: false,
classA: 0,
classB: 0,
isShow: 0,
linkClick: "",
configNav: [
{
name: "⾸页",
path:'/gwindex',
},
{
name: "产品介绍",
path:'',
subItems:[
{ link:'/education',text: '教学管理系统'},
{ link:'/yingxiaozhaosheng',text: '营销招⽣系统' },
{ link:'',text: '视频直播系统' },
{ link:'',text: '个性化定制服务' }
]
},
{
name: "渠道合作",
path:'/partner',
},
{
name: "关于我们",
path:'/aboutour',
}
]
}
},
methods: {
selected: function(index) {
this.classA = index;
},
menuselected: function(nav) {
this.classB = nav;
},
showToggle: function(index) {
this.isShow = index;
treeNavSwitch: function(nav) {      this.linkClick = nav.link;
}
}
};
</script>
<style scoped>
.nav {
width: 80%;
导航菜单min-width: 1300px;
height: auto;
margin: 0px auto;
position: absolute;
border-bottom: none;
line-height: 65px;
}
.nav-a {
cursor: pointer;
float: left;
margin-left: 50px;
letter-spacing: 4px;
position: relative;
}
.nav-a-ul {
list-style: none;
}
.nav-a-li {
display: inline-block;
margin-left: 30px;
height: 60px;
}
.nav-a-text {
font-size: 14px;
color: #fff;
line-height: 58px;
text-decoration: none;
}
.menu_ul {
width: 130px;
list-style: none;
background: #fff;
border-radius: 3px;
z-index: 999;
position: absolute;
top: 58px;
left: 67px;
display: none;
}
.menu_li {
height: 30px;
line-height: 30px;
padding-left: 12px;
}
.menu_ul_text {
font-size: 14px;
color: #666;
letter-spacing: 0;
line-height: 30px;
text-decoration: none;
padding-left: 6px;
}
.nav-a-li:hover {
border-bottom: 2px solid #fff; }
.nav-a-li.active {
border-bottom: 2px solid #fff;
/* .nav-a-li:active {
border-bottom: 2px solid #fff; } */
.nav-a-li:hover .menu_ul {
display: block;
}
.menu_ul_text:hover {
color: #2589ff;
}
.menu_li.active .menu_ul_text{    color: #2589ff;
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。