Vue中导航栏的显示开关控制

青旅半醒 2022-04-18 05:48 223阅读 0赞

> 一，制作导航栏

<template>
        <div class="space_header_text">  
           <ul>
    			<router-link to="/order">
    				<li class="nav-item">
    					<div :class="['iconfont','interval','iconClass']"></div>
                  		订单
    				</li>
    			</router-link>
    			<router-link to="/account">
    				<li class="nav-item">
    					<div :class="['iconfont','interval','iconClass']"></div>
                    	账户
    				</li>
    			</router-link>
    			<router-link to="/self">
    				<li class="nav-item">
    					 <div :class="['iconfont','interval','iconClass']"></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>

> 二，在将导航栏加在路由视图下面

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rhb3RpYW8wMTk5_size_16_color_FFFFFF_t_70]

> 三，Vuex中的state来控制该导航栏的显示与关闭状态

3.1 定义state中状态

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rhb3RpYW8wMTk5_size_16_color_FFFFFF_t_70 1]

3.2 全局引入上面的文件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rhb3RpYW8wMTk5_size_16_color_FFFFFF_t_70 2]

> 四，控制导航栏的显示与关闭

4.1打开导航栏

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rhb3RpYW8wMTk5_size_16_color_FFFFFF_t_70 3]

4.2 关闭导航栏

![在这里插入图片描述][20181109112625486.jpg]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rhb3RpYW8wMTk5_size_16_color_FFFFFF_t_70]: /images/20220418/25083ca5f4e14a5b886d7e985398e7b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rhb3RpYW8wMTk5_size_16_color_FFFFFF_t_70 1]: /images/20220418/d931e68a18974ae29ab52ecb60680e3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rhb3RpYW8wMTk5_size_16_color_FFFFFF_t_70 2]: /images/20220418/3fc85b54b4ed4b1a847e569ee2b5ccd9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rhb3RpYW8wMTk5_size_16_color_FFFFFF_t_70 3]: /images/20220418/5d74f69148e44f22bb67bc2001db987e.png
[20181109112625486.jpg]: /images/20220418/e1409da6efab424cb6da333dec2c7971.png