</div>
</div>
</div>
</template>
<script>
export default({
name:'header',
data:function () {
return {
'nav-btn': 'nav-btn'
}
}
})
</script>
<style scoped>
.header{width:1105px;margin:0 auto;height:111px;padding:12px 0 18px;position:relative;*z-index:1}
.header .logo{height:86px;width:256px;margin-top:25px}
.top-nav .navlist-wrap{width:1050px;margin:0 auto;position:relative}
.top-nav .navlist{position:absolute;right:130PX;top:-40PX}
.top-nav .navlist .nav-btn
{
float:left;
margin-left:60px;
color:#666;
vertical-align: middle;
text-decoration:none;
font-size: large;
}
</style>
在上面的代码中，我们看到了一个陌生的标签，<router-link>这个是什么玩意呢？其实他就是vue-router集成的一个组件，渲染出来的是一个<a>标签。而他的属性to其实就是一个props属性，这里面的意思就是路由的路径，与前面定义的路由path对应。关于router-link的更多介绍可以看官网router-link API文档
DemoFooter.vue:
<template>
<div id="footer">
<span>Copyright © <a href="http://www.chairis.cn" rel="external nofollow" >Chain</a>. All rights reserved</span>
</div>
</template><script>
export default({
name:'footer'
})
</script>
<style scoped>
#footer
{
height:50px;
position:fixed;
bottom:0px;
left: 0px;
background-color: #eeeeee;
width: 100%;
padding-top: 10px;
}
</style>
我们的组件都已经创建好了，接下来的事情就是把他们组合到一起。这个组合，我们就用App.vue来实现吧。
先整理下我们的思路啊：
在我们的页面上，我们需要把DemoHeader, DemoFooter放进去，而我们的DemoHeader里面定义了导航，我们希望把导航出来的组件放到header和footer之间。所以大致应该是这个样组合：
<demo-header></demo-header>
<!-- 根据路由显示的组件 -->
<!-- TO DO -->
<demo-footer></demo-footer>下面看下完整的代码吧：
<template>
<div id="app">
<demo-header></demo-header>
<router-view></router-view>
<demo-footer></demo-footer>
</div>
</template><script>
import DemoHeader from './components/DemoHeader'
import DemoFooter from './components/DemoFooter'
export default {
name: 'app',
components: {
DemoHeader,
