1、父子组件传参： 在app.vue文件里引入公共的header 和 footer
<template>
<div >
<el-header v-if="header_show"></el-header>
<router-view v-on:public_header="public_header" ></router-view>
</div>
</template>
import header from './components/header/header.vue';
export default {
name: 'App',
data() {
return {header_show:true, }
},
methods:{
//是否显示头部
public_header:function (bool) {
this.header_show = bool;
},
},
components: {
'el-header': header,
},
}
</script>
在需要控制显示隐藏的页面里使用 this.$emit('public_header',false); 来控制header不显示
export default {
created() {
this.$emit('public_header', false);
}
}
2、根据页面路由判断
页面代码：<pic v-if="picShow"></pic> Vue Data 变量名称不用下划线
export default {
watch:{
$route(e){
//console.log(e.name);
if(e.name == 'home'){
this. picShow = false
}else{
this. picShow = true
}
}
//另一种获取路由写法
/*$route(to, from) {
console.log(this.$route.name);
}*/
},
}