Vue實現(xiàn)導(dǎo)航欄的顯示開關(guān)控制

更新時間：2019年11月01日 09:58:07 作者：KOLO86

今天小編就為大家分享一篇Vue實現(xiàn)導(dǎo)航欄的顯示開關(guān)控制，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

一，制作導(dǎo)航欄

<template>
 <div class="space_header_text"> 
  <ul>
 <router-link to="/order">
 <li class="nav-item">
  <div :class="['iconfont','interval','iconClass']">&#xe617;</div>
    訂單
 </li>
 </router-link>
 <router-link to="/account">
 <li class="nav-item">
  <div :class="['iconfont','interval','iconClass']">&#xe64a;</div>
     賬戶
 </li>
 </router-link>
 <router-link to="/self">
 <li class="nav-item">
  <div :class="['iconfont','interval','iconClass']">&#xe61e;</div>
     個人中心
 </li>
 </router-link> 
 </ul>
  
 </div>
</template>
<script> 
export default{ 
 name:'space'
}
</script>
<style scoped> 
.space_header_text{ 
 position:fixed;
 z-index:99;
 width: 100%; 
}
.nav-item{
 float: left; 
 width: 33.3%;
 text-align: center;
 margin: 0 0 .16rem 0;
}
.iconClass{
 margin: .16rem auto;
}

</style>

二，在將導(dǎo)航欄加在路由視圖下面

三，Vuex中的state來控制該導(dǎo)航欄的顯示與關(guān)閉狀態(tài)

3.1 定義state中狀態(tài)

3.2 全局引入上面的文件

四，控制導(dǎo)航欄的顯示與關(guān)閉

4.1打開導(dǎo)航欄

4.2 關(guān)閉導(dǎo)航欄

以上這篇Vue實現(xiàn)導(dǎo)航欄的顯示開關(guān)控制就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue中使用element組件時事件想要傳遞其他參數(shù)的問題
這篇文章主要介紹了vue中使用element組件時事件想要傳遞其他參數(shù)的問題,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-09-09
Vue實現(xiàn)下載文件而非瀏覽器直接打開的方法
對于瀏覽器來說,文本、圖片等可以直接打開的文件,不會進行自動下載,下面這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)下載文件而非瀏覽器直接打開的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-05-05
Vue項目使用CDN優(yōu)化首屏加載問題
這篇文章主要介紹了Vue項目使用CDN優(yōu)化首屏加載問題,本文以vue、vuex、vue-touter為例，給大家介紹處理流程，需要的朋友可以參考下
2018-04-04
vue動態(tài)的 BreadCrumb 組件el-breadcrumb ElementUI詳解
這篇文章主要介紹了vue如何做一個動態(tài)的 BreadCrumb 組件,el-breadcrumb ElementUI
,本文通過圖文示例代碼相結(jié)合給大家介紹的非常詳細,需要的朋友可以參考下
2024-07-07
深入理解vue.js雙向綁定的實現(xiàn)原理
vue.js是MVVM結(jié)構(gòu)的，同類的還有AngularJs；至于MVC、MVP、MVVM的比較網(wǎng)上已經(jīng)有很多了，這樣不再重復(fù)。這篇文章將給大家深入的介紹vue.js雙向綁定的實現(xiàn)原理，有需要的朋友們可以參考借鑒，下面跟著小編一起來看看吧。
2016-12-12
vue elementUI 上傳非空驗證示例代碼
這篇文章主要介紹了vue elementUI 上傳非空驗證,原理就是寫一個假的紅色*號,每次點擊查看的時候執(zhí)this.rules.staffImg[0].required = false,本文結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友參考下吧
2023-12-12
vue-resource:jsonp請求百度搜索的接口示例
今天小編就為大家分享一篇vue-resource:jsonp請求百度搜索的接口示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue-cli打包后本地運行dist文件中的index.html操作
這篇文章主要介紹了vue-cli打包后本地運行dist文件中的index.html操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
基于axios在vue中的使用
這篇文章主要介紹了關(guān)于axios在vue中的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-03-03
vue項目本地開發(fā)完成后部署到服務(wù)器后報404錯誤解決方案
很多時候我們發(fā)現(xiàn)辛辛苦苦寫的VueJs應(yīng)用經(jīng)過打包后在自己本地搭建的服務(wù)器上測試沒有什么問題,但真正放在服務(wù)器上后會發(fā)現(xiàn)或多或少的問題,這篇文章主要給大家介紹了關(guān)于vue項目本地開發(fā)完成后部署到服務(wù)器后報404錯誤的解決方案,需要的朋友可以參考下
2024-01-01