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