vue公共头部、底部可控制显示隐藏的方法

vue公共头部、底部可控制显示隐藏的方法

找到<router-view/>路由插入点一般在App.vue页面

/* App.vue的template */
<template>
	<div class="home">
		<PCheader v-if="header_show"></PCheader>
		<router-view v-on:public_header="public_header" v-on:public_footer="public_footer"></router-view>
		<PCfoot v-if="footer_show"></PCfoot>
	</div>
</template>

在App.vue中引入公共头部和底部，设置v-if 默认设置显示，为router-view设置v-on事件

/* App.vue的script */
<script>
import PCfoot from '@/views/Public/PCfoot';//底部
import PCheader from '@/views/Public/PCheader';//头部

export default {
	name: 'PortalHome',
	data(){
		return{
			header_show:true,
			footer_show:true,
		};
	},
	components: {
		PCheader,
		PCfoot
	},
	methods:{
	      //是否显示头部
	      public_header:function (bool) {
	        this.header_show = bool;
	      },
	      //是否显示底部
	      public_footer:function (bool) {
	          this.footer_show = bool;
	      }
	  },
};
</script>

App.vue完整代码

/* App.vue页面完整代码 */
<template>
	<div class="home">
		<PCheader v-if="header_show"></PCheader>
		<router-view v-on:public_header="public_header" v-on:public_footer="public_footer"></router-view>
		<PCfoot v-if="footer_show"></PCfoot>
	</div>
</template>

<script>
import PCfoot from '@/views/Public/PCfoot';//底部
import PCheader from '@/views/Public/PCheader';//头部

export default {
	name: 'PortalHome',
	data(){
		return{
			header_show:true,
			footer_show:true,
		};
	},
	components: {
		PCheader,
		PCfoot
	},
	methods:{
	      //是否显示头部
	      public_header:function (bool) {
	        this.header_show = bool;
	      },
	      //是否显示底部
	      public_footer:function (bool) {
	          this.footer_show = bool;
	      }
	  },
};
</script>

在不需要公共头部的页面添加created生命周期函数，设置公共头部的属性为false

created() {
			this.$emit('public_header', false);
			this.$emit('public_footer', false);
		},