<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 = "treeNavSwitch(nav)">{{nav.text}}</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>

vue 導航菜單的實現（含二級菜單）