VUE vue脚手架配置公用头部、底部、公共组件，控制显示隐藏的两种方式

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);

             }*/

       },

}