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>