1、父子組件傳參： 在app.vue文件里引入公共的header 和 footer
<template>
<div id="app">
<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);
}*/
},
}