©2016-2024 Matools All rights reserved,
粤ICP备17059708号
先把项目下载地址贴上：https://github.com/623317276/vue-myproject.git
<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>
热门工具 换一换