先把项目下载地址贴上：https://github.com/623317276/vue-myproject.git

路由引入我就不详细说了

直接进入主题：

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

这是我app.vue的代码块

<template>
  <div id="app">
    <app-header v-if="header_show"></app-header>
    <router-view v-on:public_header="public_header" v-on:public_footer="public_footer"></router-view>
    <app-footer v-if="footer_show"></app-footer>
  </div>
</template>
<script>
import Header from './components/Public/Header'
import Footer from './components/Public/Footer'

export default {
  name: 'App',
  data(){
      return {
          header_show:true,
          footer_show:true,

      }
  },
  components: {
        'app-header':Header,
        'app-footer':Footer,
  },
  methods:{
      //是否显示头部
      public_header:function (bool) {
        this.header_show = bool;
      },
      //是否显示底部
      public_footer:function (bool) {
          this.footer_show = bool;
      }
  }
}
</script>

<style scoped>

</style>

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

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

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

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

贴上代码片

<template>
    <div>
        <div>这里写自己需要的header代码</div>

        <!-- start main -->
        <div class="wrap">
            <div class="wrapper">
                <div class="main">
                    <div class="content">
                        <h2 class="style list"><a href="#">Our favourite Task Management App! </a></h2>
                        <h3 class="style">posted on march 28, 2013</h3>
                        <div class="list_img">
                            <img src="/static/images/pic1.jpg" alt="" align=""/>
                        </div>
                        <p class="para"> All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
                        <a href="blog.html" class="btn">Read More</a>
                    </div>
                    <div class="content">
                        <h2 class="style list"><a href="#">Year in review: Our favourites Apps from 2012</a></h2>
                        <h3 class="style">posted on march 3, 2013</h3>
                        <div class="list_img">
                            <img src="/static/images/pic2.jpg" alt="" align=""/>
                        </div>
                        <p class="para"> All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
                        <a href="blog.html" class="btn">Read More</a>
                    </div>
                    <div class="content">
                        <h2 class="style list"><a href="#">marketing tips & tricks from the top brands</a></h2>
                        <h3 class="style">posted on December 2, 2013</h3>
                        <div class="list_img">
                            <img src="/static/images/pic3.jpg" alt="" align=""/>
                        </div>
                        <p class="para"> All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
                        <a href="blog.html" class="btn">Read More</a>
                        <div class="pagination">
                            <ul>
                                <li class="left_arrow" ><a href="#"></a></li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">6</a></li>
                                <li class="right_arrow"><a href="#"></a></li>
                                <div class="clear"></div>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'inspiration',
        components:{

        },
        data () {
            return {
            
            }
        },
        created:function () {
            this.$emit('public_header', false);
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>