利用vue-cli配合vue-router搭建一个完整的spa流程（二）

在（一）中写到了主要页面的编写，现在开始三个路由页面的编写。

第一步： 路由实例index.js

先贴出代码。

import Vue from 'vue'
import Router from 'vue-router'
import VueResource from 'vue-resource'
import tem from '@/components/showone'
import tem_cont from '@/components/showtwo'
import tem_error from '@/components/error'

//安装插件
Vue.use(Router)
Vue.use(VueResource)

export default new Router({
    routes:[
        {
            path:"/user/:list/:listNum",
            component:tem,
            children:[
                {
                    path:"con",
                    component:tem_cont
                }
            ]
        },
        {
            path:"/user/error",
            component:tem_error
        }
    ]
})

代码很短，一一解释下。

import Vue from 'vue'
import Router from 'vue-router'
import VueResource from 'vue-resource'
import tem from '@/components/showone'
import tem_cont from '@/components/showtwo'
import tem_error from '@/components/error'

↑ 这里是引入所有使用的数据，参数。

//安装插件
Vue.use(Router)
Vue.use(VueResource)

↑ 这里说下 vue-resource 这个一开始没有安装，打开项目右键打开Git 键入 npm install vue-resource --save
这是一个ajax插件，使用起来比较方便而且很简单。

routes:[
    {
        path:"/user/:list/:listNum",
        component:tem,
        children:[
            {
                path:"con",
                component:tem_cont
            }
        ]
    },
    {
        path:"/user/error",
        component:tem_error
    }
]

↑ 路由配置，详情页面是主页面的子路由。

第二部： 三个路由xxxx.vue文件编写

Ⅰ： showone.vue

先贴出代码，有些复杂，慢慢解释。

<template>
    <div style='cursor:pointer;height: 867px;' >
        <div v-show='routerData.mainShow'>
            <nav class='navbar navbar-default'>
                <div class='container' style="padding: 0;">
                    <div class='collapse navbar-collapse' style="padding: 0;">
                        <ul class='nav navbar-nav userNav'>
                            <li><a v-bind:class="{activeBg:isActive==0}" v-on:click='link(0)'>首页</a></li>
                            <li><a v-bind:class="{activeBg:isActive==1}" v-on:click='link(1)'>页面一</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
            <div class='media' v-for='(item,index) in routerData.showData' v-on:click='go(item,index)'>
                <div>
                    <div class='media-left'>
                        <img class='media-object' v-bind:src='item.thumbnail'>
                    </div>
                    <div class='media-body'>
                        <h2 class='media-heading' v-text='item.title'></h2>
                        <span style='font-size:25px;color:#ccc'>{{item.content | more}}</span>
                    </div>
                </div>
            </div>
        </div>
        <router-view v-bind:router-nesting='routerData'></router-view>
    </div>
</template>
<script>
    import router from '.././router'
    export default{
        props:["routerData"],
        data(){
            return {
                isActive:this.$route.path.slice(6,7)
            }
        },
        methods:{
            go(obj,index){
                router.push({path:this.$route.path+"/con",query:{type:index}});
            },
            link(num){
                var listNum=this.$route.path.slice(6,7);
                if(listNum!=num){
                    router.push("/user/"+num+"/0");
                    this.isActive=this.$route.path.slice(6,7);
                }
            }
        },
        filters:{
            more(value){
                var newMessage=value.slice(0,40)+"........点击查看更多";
                return newMessage;
            }
        }
    }
</script>
<style>
    .activeBg{
        background-color: teal;
        color: white !important;
        transition: 0.5s all ease-in;
    }
    .userNav :hover{
        background-color: cornsilk;
        color: black !important;
    }
</style>

template有俩部分组成：

<div v-show='routerData.mainShow'>
    <nav class='navbar navbar-default'>
        <div class='container' style="padding: 0;">
            <div class='collapse navbar-collapse' style="padding: 0;">
                <ul class='nav navbar-nav userNav'>
                    <li><a v-bind:class="{activeBg:isActive==0}" v-on:click='link(0)'>首页</a></li>
                    <li><a v-bind:class="{activeBg:isActive==1}" v-on:click='link(1)'>页面一</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class='media' v-for='(item,index) in routerData.showData' v-on:click='go(item,index)'>
        <div>
            <div class='media-left'>
                <img class='media-object' v-bind:src='item.thumbnail'>
            </div>
            <div class='media-body'>
                <h2 class='media-heading' v-text='item.title'></h2>
                <span style='font-size:25px;color:#ccc'>{{item.content | more}}</span>
            </div>
        </div>
    </div>
</div>

↑ 这是第一部分，包含导航与当前分类中全部内容的一个列表。

①： v-show='routerData.mainShow' 这个控制整体部分显示隐藏，与 上一页，下一页按钮为相同的控制数据，因为二者显示，隐藏逻辑是一样的。都是在详情页隐藏，主页显示。

②： v-on:click='link(0)' 导航按钮跳转绑定的函数。

③： v-for='(item,index) in routerData.showData' 循环数据，渲染列表。

④： v-on:click='go(item,index)' 每个列表绑定跳转到详情页的函数。

⑤： {{item.content | more}} 渲染简介，并且通过一个过滤器使内容中数字过多时，进行剪切

---

<router-view v-bind:router-nesting='routerData'></router-view>

↑ 这是第二部分，子路由入口。v-bind:router-nesting='routerData' 给子路有中渲染页面的数据。

接下来是script部分

首先引入router实例 import router from '.././router'
再接收 zjapp.vue 传输过来的数据 props:["routerData"]

---

methods方法里函数解释：

go(obj,index){
    router.push({path:this.$route.path+"/con",query:{type:index}});
}

↑ 这是列表中内容点击时执行的函数，从 template 中传过来 index 值，添加到 url 中，从而获取这是列表中第几个。

link(num){
    var listNum=this.$route.path.slice(6,7);
    if(listNum!=num){
        router.push("/user/"+num+"/0");
        this.isActive=this.$route.path.slice(6,7);
    }
}

↑ link（num）函数是导航点击绑定的函数，通过传志 num 将 url 转换为对应的分类，从而触发 watch 重新获取数据。这里加了一个判断，重复点击，无效。

filters:{
    more(value){
        var newMessage=value.slice(0,40)+"........点击查看更多";
        return newMessage;
    }
}

↑ 过滤器，剪切字数。

---

style就不解释了

Ⅱ： showtwo.vue

这个是文件是详情页面，即主页面中的列表内容点击后，跳转的页面。

<template>
    <div style='height:700px;padding-top:100px'>
        <div>
            <img v-bind:src='routerNesting.detailedData.src' style='display:block;margin:0 auto;500px'>
            <br>
            <h2 v-text='routerNesting.detailedData.title'></h2>
            <p>{{routerNesting.detailedData.content}}</p>
            <button v-on:click='back' class='btn btn-success'>返回</button>
        </div>
    </div>
</template>
<script>
    import router from '.././router'
    export default{
        props:["routerNesting"],
        methods:{
            back(){
                router.push(this.$route.path.slice(0,9));
            }
        }
    }
</script>
<style></style>

↑ 数据与showone.vue相似，routerNesting数据是通过ziapp.vue->showone.vue->showtwo.vue传递过来的。
back() 函数将url从/user/0/0/con?type=2跳转到/user/0/0 触发watch更新数据。

Ⅲ： error.vue

<template>
    <div style="margin-top: 150px;">
        <h1 style="text-align: center;">遥远的404！</h1>
        <div style=" 150px;margin: 50px auto;">
            <button v-on:click="jump(0)" class="btn btn-primary">首页</button>
            <button v-on:click="jump(1)" class="btn btn-primary">第一页</button>
        </div>
    </div>
</template>
<script>
    import router from '.././router'
    export default{
        methods:{
            jump(num){
                num==0?router.push("/user/0/0"):router.push("/user/1/0");
            }
        }
    }
</script>
<style></style>

↑ 嗯~ o(￣▽￣)o，这个比较简单，不做解释了。

---

结语

至此，全部都解清楚了，按照步骤来的话一个简单的spa也初见其形。

整体思想：通过watch监控url的变化，变化后执行routerPath（）函数，随后重新获取数据。