vue使用vuex實現首頁導航切換不同路由的方法
更新時間：2019年05月08日 09:25:56 作者：遇你溫柔如初
這篇文章主要介紹了vue使用vuex實現首頁導航切換不同路由的方法 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
vue實現首頁導航切換不同路由的方式（二）【使用vuex實現的】，具體代碼如下所示：
<nav>
<!-- 導航欄 -->
<div class="indexNavOut">
<div class="indexNav">
<ul class="navLi">
<li @click="checkNav()" style="width: 130px;"><router-link to="/home">了解海華教育(視頻)</router-link><!--<a href="#">了解海華教育(視頻)</a>--></li>
<li @click="checkNav()" v-bind:class="{'active':Index=='#/home','active2':Index=='#/'}">
<router-link to="/home">首頁</router-link>
</li>
<li @click="checkNav()" v-bind:class="{'active':Index=='#/synopsis'}"><router-link to="/synopsis">學校簡介</router-link>
</li>
<li @click="checkNav()" v-bind:class="{'active':Index=='#/major'}"><router-link to="/major">專業(yè)介紹</router-link>
</li>
<li @click="checkNav()" v-bind:class="{'active':Index=='#/campus'}"><router-link to="/campus">校園風采</router-link>
</li>
<li @click="checkNav()" v-bind:class="{'active':Index=='#/news'}"><router-link to="/news">新聞資訊</router-link>
</li>
<li @click="checkNav()" v-bind:class="{'active':Index=='#/enrollment'}"><router-link to="/enrollment">招生信息</router-link>
</li>
<li @click="checkNav()" v-bind:class="{'active':Index=='#/employment'}"><router-link to="/employment">就業(yè)中心</router-link>
</li>
<li @click="checkNav()" v-bind:class="{'active':Index=='#/enlist'}"><router-link to="/enlist">在線報名</router-link>
</li>
<li @click="checkNav()" v-bind:class="{'active':Index=='#/contact'}"><router-link to="/contact">聯(lián)系我們</router-link>
</li>
</ul>
</div>
</div>
</nav>
css:
/* 導航欄 */
.indexNavOut{
background-color: #486B8A;
height: 60px;
}
.indexNav{
width: 80%;
margin: 0 auto;
}
.navLi{
display: flex;
}
.navLi li:nth-child(1){
flex: 1.8;
}
.navLi li{
flex: 1;
}
.navLi li a{
text-decoration: none;
color: #fff;
font-size: 16px;
padding-bottom: 17px;
}
.indexNav .icon{
width: 230px;
margin-top: 10px;
}
.indexNav .icon img{
width: 100%;
}
.navLi li {
height: 60px;
line-height: 60px;
position: relative;
}
.navLi li.active a{
border-bottom: 3px solid #E96463;
}
.navLi li.active2 a{
border-bottom: 3px solid #E96463;
}
.navLi li:last-child:after{
border-right: none;
}
.navLi li .line{
width: 20px;
height: 3px;
background: #E96463;
border: none;
position: absolute;
/*top: -14px;*/
/*right: -32px;*/
left: 50px;
top: 45px;
z-index: 100;
}
js:
main.js代碼：
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
majorDetail: false,
Index: document.location.hash,//導航條跳轉路由樣式控制
},
mutations: {
//控制專業(yè)介紹詳情顯示隱藏
updatemajorDetail(state, majorDetail) {
state.majorDetail = majorDetail;
},
updateIndex(state, Index) {
state.Index = Index;
}
}
});
效果圖：
現在在這個頁面里點擊了解更多的時候跳轉到新聞資訊頁面，然后然后state里的值，然后改變當前的url以及導航選中新聞資訊。
總結
以上所述是小編給大家介紹的vue使用vuex實現首頁導航切換不同路由的方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
這篇文章主要介紹了Vue-cli集成axios請求出現CORS跨域問題及解決方案,具有很好的參考價值,希望對大家有所幫助,2023-10-10
下面小編就為大家分享一篇vue 路由頁面之間實現用手指進行滑動的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue框架下部署上線后刷新報404問題解決方案,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細介紹了vue的插槽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要介紹了vue實現按鈕文字動態(tài)改變方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了vue devserver及其配置方法,本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要為大家介紹了vue前端性能優(yōu)化之預加載和懶加載示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了遇到vue前端npm?i報錯多個版本不一致問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue基于NUXT的SSR詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了Vue動態(tài)加載異步組件的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11