vue.js 2.0和vue-router入门实例

自学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（关注+给星哦，谢谢哈）
自学的路很苦，入的坑多了，也会受益匪浅，不过希望各位朋友少入坑，最近比较忙，只有下班之后利用时间写，这里只是写了大概的思路，还在继续完善中。