vue简单的小demo

app.vue

<template>
  <div id="app">
    <v-header v-if="showHeader"></v-header>
    <router-view  v-on:header='header' v-on:footer='footer'/>
    <v-footer v-if="showFooter"></v-footer>
  </div>
</template>

<script>
import header from './components/header.vue'
import footer from './components/footer.vue'
export default {
  name: 'App',
  data(){
    return{
      showHeader:true,
      showFooter:true,
    }
  },
  components:{
    'v-header':header,
    'v-footer':footer,
  },
  methods:{
    //是否显示头部
    header:function(bool){
      this.showHeader = bool;
    },
    //是否显示底部
    footer:function(bool){
      this.showFooter = bool;
    }
  }
}
</script>

<style lang='scss'>
body,html{
  margin:0;
  height:100%;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height:100%;
}
</style>

header.vue

<template>
    <div>
        我是公共header
    </div>
</template>
<style scoped>
div{
    height:80px;
    line-height:80px;
    background:blue;
    color:#fff;
}
</style>

footer.vue

<template>
    <div>我是公共footer</div>
</template>
<style scoped>
div{
    height:80px;
    line-height:80px;
    background:blue;
    color:#fff;
}
</style>

main.vue

<template>
    <div class="main">
        <div>我是主页面</div>
        <router-link to="/index">点击跳转到首页</router-link>
    </div>
</template>
<script>
export default {
    data(){
        return{

        }
    },
    created:function(){
        this.$emit('header',false);
        this.$emit('footer',false);
    }
}
</script>
<style scoped lang='less'>
div.main{
    height:100vh;
    background-color: #6714ee; 
    color:#fff;
    div{
        padding-top:20vh;
        font-size:40px;
        margin-bottom:20px;
    }
    a{
        color:red;
    }
    a:hover{
        text-decoration: underline;
        color:#fff;
    }
}
</style>

index.vue

<template>
    <div class="index">
        <div>我是首页</div>
        <router-link to="/">跳转到主页面</router-link>
    </div>
</template>
<script>
export default {
    data(){
        return{

        }
    },
    created:function(){
        this.$emit('header',true);
        this.$emit('footer',true);
    }
}
</script>
<style scoped lang='less'>
    .index{
        height:calc(100vh - 160px);
        background:yellow;
        color:tomato;
        font-size:40px;
        div{
            padding-top:20vh;
        }
        a{
            color:turquoise;
            font-size:20px;
        }
    }
</style>