vue实现部分页面导入底部 vue配置公用头部、底部，可控制显示隐藏

vue实现部分页面导入底部 vue配置公用头部、底部，可控制显示隐藏

在app.vue文件里引入公共的header 和 footer

header 和 footer 默认显示，例如某个页面不需要显示header

可以使用 this.$emit('header',false); 来控制header不显示

例如：test页面不需要显示header，在页面被创建的时候广播(this.$emit)告诉上级不显示header，

并且在当前页面写自己的header代码，就可以了

app.vue

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<template>   <div id="app">     <app-header v-if="header_show"></app-header>     <router-view v-on:header="header" v-on:footer="footer"></router-view>     <app-footer v-if="footer_show"></app-footer>   </div> </template>   <script> import Header from './components/header' import Footer from './components/footer' export default {   name: 'App',   data(){       return {           header_show:true,           footer_show:true,       }   },   components: {         'app-header':Header,         'app-footer':Footer,   },   methods:{       //是否显示头部       header:function (bool) {         this.header_show = bool;       },       //是否显示底部       footer:function (bool) {           this.footer_show = bool;       }   } } </script>

test.vue

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<template>     <div>         test     </div> </template>   <script>     export default {         name: 'test',         components:{         },         data () {             return {                           }         },         created:function () {             this.$emit('header', false);         }     } </script>

header.vue

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<template>     <div class="header">         head     </div> </template>   <script>     export default {         name: 'app-header',         data () {             return {             }         },         methods:{         },         created(){         }     } </script>

footer.vue

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<template>     <div class="wrap" id="app-footer">         footer     </div> </template>   <script>     export default {         name: 'app-footer',         data () {             return {             }         }     } </script>