自学vue.js的旅程中，没有实际项目可以操作，模仿APP一些简单的操作，所以自己边学边做了一个移动端的小实例 
用到的技术：
1.vue.js
2.vue-router
3.axios
4.vue-awesome-swiper
5.webpack
项目的结构
可以理解为两部分，一部分Home,一部分为Detail：
1.Home下有4个组件，就是底部4个模块，点击每个菜单选项，会加载相应的内容
Home -> HomeFirst,HomeSecond,HomeThird,HomeFourth
2.Detail是点击列表，根据列表的ID发生跳转，显示对应的内容
这里我拿HomeFirst(“生活圈”模块)出来讲，其他都雷同，有兴趣的同学可以自己试试其他几个模块
首先配置我们的路由，main.js：
import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
Vue.prototype.$http = axios;
Vue.use(VueRouter);
Vue.config.productionTip = false
import Home from './pages/Home';
import Detail from './pages/Detail';
import HomeFirst from './components/HomeFirst';
const routes = [
{
path:'/',
component:Home,
children:[
{
path:'/home/life',
component:HomeFirst
}
]
},
{
path:'/detail/:id',
name:'detail',
component:Detail
}
]
const router = new VueRouter({
routes
});
new Vue({
el: '#app',
data:{
transitionName:"slide"
},
router,
watch: {
'$route' (to, from){
const toDepth = to.path.substring(0, to.path.length-2).split('/').length
const fromDepth = from.path.substring(0, from.path.length-2).split('/').length
this.transitionName = toDepth < fromDepth ? 'slide' : 'slide_back'
}
}这里的 slide，对应的css：
/* 跳转页面动画 */
.slide-enter,
.slide_back-enter {
position: absolute;
width: 100%;
}
.slide-leave,
.slide_back-leave {
position: absolute;
width: 100%;
}
.slide-enter-active,
.slide_back-enter-active {
transition: all 0.3s linear;
}
.slide-leave-active {
position: absolute;
transition: all 0.3s linear;
transform: translate(-100%);
}
.slide-enter{
transform: translateX(100%);
}
.slide_back-leave-active {
position: absolute;
transition: all 0.3s linear;
transform: translate(100%);
}
.slide_back-enter {
transform: translateX(-100%);
}
因为头部跟顶部是固定的，在列表和详情页发生跳转的时候保持不动，所以要和router-view分开, Home.vue:
<template>
<div>
<div class="header flex">
<input type="text" placeholder="搜索">
<a href="javascript:;"><img src="../../static/img/icon/search.png" alt=""></a>
</div>
<router-view></router-view>
<div class="footer flex">
<div @click="selectMenu(1)">
<router-link to="/home/life">
<div v-if="menu1">
<img src="../../static/img/icon/life.png" />
<p class="menuNoSelect">生活圈</p>
</div>
<div v-else>
<img src="../../static/img/icon/life_select.png" />
<p class="menuSelect">生活圈</p>
</div>
</router-link>
</div>
<div @click="selectMenu(2)">
<router-link to="/home/pet">
<div v-if="menu2">
<img src="../../static/img/icon/diamond.png" />
<p class="menuNoSelect">宠物圈</p>
</div>
<div v-else>
<img src="../../static/img/icon/diamond_select.png" />
<p class="menuSelect">宠物圈</p>
</div>
</router-link>
</div>
<div @click="selectMenu(3)">
<router-link to="/home/weather">
<div v-if="menu3">
<img src="../../static/img/icon/weather.png" />
<p class="menuNoSelect">天气预报</p>
</div>
<div v-else>
<img src="../../static/img/icon/weather_select.png" />
<p class="menuSelect">天气预报</p>
</div>
</router-link>
</div>
<div @click="selectMenu(4)">
<router-link to="/home/mine">
<div v-if="menu4">
<img src="../../static/img/icon/mine.png" />
<p class="menuNoSelect">我的</p>
</div>
<div v-else>
<img src="../../static/img/icon/mine_select.png" />
<p class="menuSelect">我的</p>
</div>
</router-link>
</div>
</div>
</div>
</template>
<script>
export default{
data(){
return {
// isShowBg:true
menu1:false,
menu2:true,
menu3:true,
menu4:true
}
},
methods:{
selectMenu(flag){
if(flag==1){
this.menu1 = false;
this.menu2 = true;
this.menu3 = true;
this.menu4 = true;
}else if(flag==2){
this.menu1 = true;
this.menu2 = false;
this.menu3 = true;
this.menu4 = true;
}else if(flag==3){
this.menu1 = true;
this.menu2 = true;
this.menu3 = false;
this.menu4 = true;
}else{
this.menu1 = true;
this.menu2 = true;
this.menu3 = true;
this.menu4 = false;
}
}
}
}
</script>整体框架我们已经搭好，接下来就是填充里面的内容了，比如“生活圈”模块的列表,HomeFirst.vue:
<template>
<div>
<div class="lists">
<div class="list" v-for="data in datas">
<router-link :to="{name:'detail',params:{id:data.id}}">
<div class="list-header">
<img :src="data.headerImg" alt="" class="headerImg" />
<span class="name">{{data.author}}</span>
</div>
<div class="list-coverImg">
<img :src="data.coverImg" alt="">
</div>
<div class="list-title">
<p>{{data.title}}</p>
</div>
<div class="list-bottom flex">
<div>
<img src="../../static/img/icon/zan.png" alt="">
<span>{{data.zanNum}}</span>
</div>
<div>
<img src="../../static/img/icon/like.png" alt="">
<span>{{data.likeNum}}</span>
</div>
</div>
</router-link>
</div>
</div>
</div>
</template>
<script>
export default{
data(){
return {
datas:[],
}
},
created(){
this.fetchData()
},
watch:{
'$route':'fetchData'
},
methods:{
fetchData(){
this.$http.get("../../static/json/json.json").then((response)=>{
var data = response.data.data;
this.datas = data;
});
}
}
}
</script>每个列表对应一个ID，我们可以根据这个ID，通过路由的配置发生跳转, Detail.vue
<template>
<div class="detail">
<div class="detail-header">
<img src="../../static/img/icon/back.png" alt="" @click="goBack" class="goBack" />
<span class="detail-title">{{content.author}}</span>
</div>
<div class="detail-cover">
<img :src="content.coverImg" alt="">
</div>
<div class="detail-main">
<div class="detail-title">{{content.title}}</div>
<div class="detail-authorInfo">
<img :src="content.headerImg" alt="">
<span>{{content.author}}</span>
<span>2017-3-19</span>
<span>{{content.zanNum}} 赞 </span>
</div>
<div class="detail-content">
<div>{{content.content}}</div>
</div>
</div>
</div>
</template>
<script>
export default{
data(){
return{
content:{},
}
},
created(){
this.fetchData();
},
methods:{
goBack(){
window.history.back(-1);
},
fetchData(){
this.$http.get("../../static/json/json.json").then((response)=>{
var _index = this.$route.params.id;
var datas = response.data.data;
var _this = this;
datas.forEach(function(data){
if(data.id == _index){
_this.content = data;
}
});
})
},
}
}
</script>GitHub地址：https://github.com/antkonw/vue-rouer（关注+给星哦，谢谢哈）
自学的路很苦，入的坑多了，也会受益匪浅，不过希望各位朋友少入坑，最近比较忙，只有下班之后利用时间写，这里只是写了大概的思路，还在继续完善中。