利用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（）函數，隨後從新獲取數據。