router-view : 这是vue-router的子路由显示面板，通过src/router/index.js来控制
home : 主页视图文件
public : 公用组件，亦可在其他页面使用，降低工作量
AppHeader : 应用头部组件
Loading : 加载中的组件，就一张gif
侧边栏SideMenu组件
在src/components目录中新建一个文件，名为SideMenu.vue,修改内容为：
<template lang="html">
<div class="side-menu" @click = "hideSide">
<ul>
<router-link v-for = "(item,index) in list" :to="item.url" :key = "index">
{{item.title}}
<i class = "icon-chevron-right"></i>
</router-link>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
list : [
{title : "首页",url : "/"},
{title : "全部分类",url : "/category"}
]
}
},
methods : {
hideSide(){
this.$emit("hide")
}
}
}
</script>
<style lang="css">
.side-menu {
background: rgba(10,10,10,.3);
height: 100%;
position: fixed;
width: 100%;
top: 0;
padding-top: 44px;
z-index: 11;
}
.side-menu ul {
width: 70%;
background: #282828;
height: 100%;
border-top: 1px solid #222;
}
.side-menu ul li {
height: 50px;
border-bottom: 1px dotted #333;
font-size: 14px;
line-height: 50px;
padding: 0 30px 0 20px;
color: #9a9a9a;
}
.side-menu ul li i {
float: right;
line-height: 50px;
}
</style>
这里解释一下文件里面的内容:
文件分为三大块
template
script
style
这些内容通过script中node的export方法推出去
其中template渲染了几个router-link,用来跳转路由
script定义了data和method
style写了样式
然后打开src/App.vue，修改里面的内容，追加下图内容：
好的，我们的SideMenu组件就注册完成了。
搭建router-view内容
好的，我们接下来做router-view的内容
bus-中央总线
在做之前，我们需要了解一个新的概念-bus，又称中央总线
好的，又是之前那张思维导图，不过是不是多出了三台车呢？
没错，这就是我们的bus。
当appheader想加载侧边栏时，是不能穿越徒步穿越山和大海的，老司机还是要开车的是不是
这个时候我们坐公交就行了，告诉app，把我给拉出来
当然，side-menu和app之间相距不远，父子组件是可以直接绑定的
在src目录下创建bus.js,内容为