利用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（）函数，随后重新获取数据。
