上篇文章太长了，编写时拖动太贫苦，重开一篇。
应用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;width: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="width: 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（）函数，随后从新猎取数据。

新手，有毛病，和须要斧正的处所迎接留言！

后续会有其他实例项目详解，至于时刻嘛，这要看什么时刻找到工作了(ˉ▽ˉ；)…