效果如下：
a 标签会先执行绑定的事件，后执行 href 跳转页面（页面刷新）。
导航点击高亮（页面跳转）事件，前端根据一级导航点击时的数字码来确认高亮对象。
页面跳转前执行的绑定事件，缓存数字码，跳转后自动刷新页面，获取缓存中的数字码。
废话不多说，直接上代码。
主要结构：
<div class="navbar" :class="'bg_opacity_'+opacity_num">
<div class="logo"><img src="img/logo.png" alt="logo"></div>
<div class="nav" @click="showNavbar(1)" :class="showNavbarItem == 1 ? 'navbar-item-active' : ''"><a
href="index.html">首页</a></div>
<div class="nav" @click="showNavbar(2)" :class="showNavbarItem == 2 ? 'navbar-item-active' : ''"><a
href="about.html">关于我们</a></div>
<div class="nav" @click="showNavbar(3)" :class="showNavbarItem == 3 ? 'navbar-item-active' : ''"><a
href="product.html">产品展示</a></div>
<div class="nav" @click="showNavbar(4)" :class="showNavbarItem == 4 ? 'navbar-item-active' : ''"><a
href="cooperation.html">合作案例</a></div>
<div class="nav" @click="showNavbar(5)" :class="showNavbarItem == 5 ? 'navbar-item-active' : ''"><a
href="attract.html">招商加盟</a></div>
<div class="nav" @click="showNavbar(6)" :class="showNavbarItem == 6 ? 'navbar-item-active' : ''"><a
href="solution.html">解决方案</a></div>
</div>
空白页：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title></title>
<link href="css/common.css" rel="stylesheet">
<script src="js/vue.js"></script>
<script src="js/polyfill.min.js"></script>
<script src="js/vueComponents.js"></script>
</head>
<body>
<div id="root">
<vue-navbar></vue-navbar>
<vue-footer></vue-footer>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script>
new Vue({
el: "#root",
data: {},
methods: {},
mounted: function () {
}
})
</script>
</body>
</html>
导航组件：
Vue.component('vue-navbar', {
data: function () {
return {
showNavbarItem:1,//默认第一项 首页 高亮
opacity_num: 1//导航透明度默认为0.1
}
},
methods: {
showNavbar: function (index){
if(index){
sessionStorage.setItem("showNavbarItem",index);
this.showNavbarItem = index
}else{
this.showNavbarItem = sessionStorage.getItem("showNavbarItem");
}
},
handleScroll: function () {
//随页面滚动距离 导航背景色透明度逐渐加深
this.winPos = $(window).scrollTop();//距离顶部滚动高度
if (this.winPos == 0) {
this.opacity_num = 1
} else if (this.winPos > 0 && this.winPos < 200 ) {
this.opacity_num = 3
} else if (this.winPos >= 200 && this.winPos < 300 ) {
this.opacity_num = 6
} else if (this.winPos >= 300) {
this.opacity_num = 10
}
},
},
mounted: function () {
window.addEventListener('scroll', this.handleScroll);
this.showNavbar();
},
template:`<div class="navbar" :class="'bg_opacity_'+opacity_num"><div class="logo"><img src="img/logo.png" alt="logo"></div><div class="nav" @click="showNavbar(1)" :class="showNavbarItem == 1 ? 'navbar-item-active' : ''"><a href="index.html">首页</a></div><div class="nav" @click="showNavbar(2)" :class="showNavbarItem == 2 ? 'navbar-item-active' : ''"><a href="about.html">关于我们</a></div><div class="nav" @click="showNavbar(3)" :class="showNavbarItem == 3 ? 'navbar-item-active' : ''"><a href="product.html">产品展示</a></div><div class="nav" @click="showNavbar(4)" :class="showNavbarItem == 4 ? 'navbar-item-active' : ''"><a href="cooperation.html">合作案例</a></div><div class="nav" @click="showNavbar(5)" :class="showNavbarItem == 5 ? 'navbar-item-active' : ''"><a href="attract.html">招商加盟</a></div><div class="nav" @click="showNavbar(6)" :class="showNavbarItem == 6 ? 'navbar-item-active' : ''"><a href="solution.html">解决方案</a></div></div>`
})
样式：
/*页头导航样式*/
/*小屏幕下横向滚动与纵向固定fixed冲突，纵向固定fixed时不支持屏幕缩小时的横向滚动*/
div.navbar{
/*min-width: 1220px;*/
/*max-width: 1920px;*/
width:100%;
height:64px;
line-height: 64px;
display: flex;
flex-direction: row;
justify-content: center;
position: fixed;
/*position: absolute;*/
/*top:0;*/
/*left:0;*/
z-index: 2;
font-size: 18px;
color:#fff;
}
.bg_opacity_1{
background: rgba(26,26,26,0.1);
}
.bg_opacity_3{
background: rgba(26,26,26,0.3);
}
.bg_opacity_6{
background: rgba(26,26,26,0.6);
}
.bg_opacity_10{
background: rgba(26,26,26,1);
}
@media (min-width: 1920px){
div.logo{
margin-right: 380px;
}
}
div.logo img{
width:180px;
height:48px;
vertical-align: middle;
}
/*导航固定fixed 适应小屏幕 间距使用百分比*/
div.nav{
margin-right:2.5%;
margin-left:2.5%;
}
div.nav a:hover{
color:#afd334;
}
.navbar-item-active{
color:#afd334;
border-bottom: 3px solid #afd334;
}
div.nav a{
text-decoration: none;
display: block;
width:100%;
color:inherit;
}
/*导航样式结束*/