效果如下：
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;
}
/*導航樣式結束*/