資訊專欄INFORMATION COLUMN
摘要：利用配合搭建一個(gè)完整的流程一在一中寫到了主要頁面的編寫，現(xiàn)在開始三個(gè)路由頁面的編寫。每個(gè)列表綁定跳轉(zhuǎn)到詳情頁的函數(shù)。整體思想通過監(jiān)控的變化，變化后執(zhí)行函數(shù)，隨后重新獲取數(shù)據(jù)。
上篇文章太長了，編寫時(shí)拖動(dòng)太麻煩，重開一篇。
利用vue-cli配合vue-router搭建一個(gè)完整的spa流程（一）
在（一）中寫到了主要頁面的編寫，現(xiàn)在開始三個(gè)路由頁面的編寫。
第一步： 路由實(shí)例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"
↑ 這里是引入所有使用的數(shù)據(jù)，參數(shù)。
//安裝插件 Vue.use(Router) Vue.use(VueResource)
↑ 這里說下 vue-resource 這個(gè)一開始沒有安裝，打開項(xiàng)目右鍵打開Git 鍵入 npm install vue-resource --save
這是一個(gè)ajax插件，使用起來比較方便而且很簡(jiǎn)單。
routes:[
{
path:"/user/:list/:listNum",
component:tem,
children:[
{
path:"con",
component:tem_cont
}
]
},
{
path:"/user/error",
component:tem_error
}
]
↑ 路由配置，詳情頁面是主頁面的子路由。
第二部： 三個(gè)路由xxxx.vue文件編寫 Ⅰ： showone.vue先貼出代碼，有些復(fù)雜，慢慢解釋。
![]()
{{item.content | more}}
template有倆部分組成：
![]()
{{item.content | more}}
↑ 這是第一部分，包含導(dǎo)航與當(dāng)前分類中全部內(nèi)容的一個(gè)列表。
①： v-show="routerData.mainShow" 這個(gè)控制整體部分顯示隱藏，與 上一頁，下一頁按鈕為相同的控制數(shù)據(jù)，因?yàn)槎唢@示，隱藏邏輯是一樣的。都是在詳情頁隱藏，主頁顯示。
②： v-on:click="link(0)" 導(dǎo)航按鈕跳轉(zhuǎn)綁定的函數(shù)。
③： v-for="(item,index) in routerData.showData" 循環(huán)數(shù)據(jù)，渲染列表。
④： v-on:click="go(item,index)" 每個(gè)列表綁定跳轉(zhuǎn)到詳情頁的函數(shù)。
⑤： {{item.content | more}} 渲染簡(jiǎn)介，并且通過一個(gè)過濾器使內(nèi)容中數(shù)字過多時(shí)，進(jìn)行剪切
↑ 這是第二部分，子路由入口。v-bind:router-nesting="routerData" 給子路有中渲染頁面的數(shù)據(jù)。
接下來是script部分
首先引入router實(shí)例 import router from ".././router"
再接收 zjapp.vue 傳輸過來的數(shù)據(jù) props:["routerData"]
methods方法里函數(shù)解釋：
go(obj,index){
router.push({path:this.$route.path+"/con",query:{type:index}});
}
↑ 這是列表中內(nèi)容點(diǎn)擊時(shí)執(zhí)行的函數(shù)，從 template 中傳過來 index 值，添加到 url 中，從而獲取這是列表中第幾個(gè)。
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）函數(shù)是導(dǎo)航點(diǎn)擊綁定的函數(shù)，通過傳志 num 將 url 轉(zhuǎn)換為對(duì)應(yīng)的分類，從而觸發(fā) watch 重新獲取數(shù)據(jù)。這里加了一個(gè)判斷，重復(fù)點(diǎn)擊，無效。
filters:{
more(value){
var newMessage=value.slice(0,40)+"........點(diǎn)擊查看更多";
return newMessage;
}
}
↑ 過濾器，剪切字?jǐn)?shù)。
style就不解釋了
Ⅱ： showtwo.vue這個(gè)是文件是詳情頁面，即主頁面中的列表內(nèi)容點(diǎn)擊后，跳轉(zhuǎn)的頁面。
![]()
{{routerNesting.detailedData.content}}
↑ 數(shù)據(jù)與showone.vue相似，routerNesting數(shù)據(jù)是通過ziapp.vue->showone.vue->showtwo.vue傳遞過來的。
back() 函數(shù)將url從/user/0/0/con?type=2跳轉(zhuǎn)到/user/0/0 觸發(fā)watch更新數(shù)據(jù)。
遙遠(yuǎn)的404！
↑ 嗯~ o(￣▽￣)o，這個(gè)比較簡(jiǎn)單，不做解釋了。
結(jié)語至此，全部都解清楚了，按照步驟來的話一個(gè)簡(jiǎn)單的spa也初見其形。
整體思想：通過watch監(jiān)控url的變化，變化后執(zhí)行routerPath（）函數(shù)，隨后重新獲取數(shù)據(jù)。
新手，有錯(cuò)誤，和需要指正的地方歡迎留言！
后續(xù)會(huì)有其他實(shí)例項(xiàng)目詳解，至于時(shí)間嘛，這要看什么時(shí)候找到工作了(ˉ▽ˉ；)...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/82703.html
摘要：利用配合搭建一個(gè)完整的流程二前言所用的一些基本操作。全局安裝創(chuàng)建一個(gè)基于的模板創(chuàng)建過程中，為必須，其他語法檢測(cè)，單元測(cè)試等按需求安裝。為入口文件，的實(shí)例在這里書寫。掛載在中的標(biāo)簽上。定時(shí)器的作用是模擬數(shù)據(jù)請(qǐng)求延時(shí)。 2017/5/9 更新！GitHubpages搞了下，PC可以瀏覽?！?https://15901233752.github.io... showImg(https://...
摘要：本篇文章主要是我在開發(fā)前研究了的單頁面應(yīng)用，因?yàn)樾枰玫降?，所以確保安裝了，建議官網(wǎng)安裝最新的穩(wěn)定版本。本文章只是和大家探討怎么利用配合做一個(gè)單頁面應(yīng)用，具體關(guān)于里面的內(nèi)容怎么寫并不在本篇文章的介紹范圍。 本篇文章主要是我在開發(fā)前研究了webpack+vue.js的單頁面應(yīng)用，因?yàn)樾枰玫絥ode的npm，所以確保安裝了node，建議官網(wǎng)安裝最新的穩(wěn)定版本。并且在項(xiàng)目中需要加載一些np...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
閱讀 1444·2021-11-24 09:38
閱讀 2159·2021-09-22 15:17
閱讀 2503·2021-09-04 16:41
閱讀 3628·2019-08-30 15:56
閱讀 3577·2019-08-29 17:19
閱讀 2029·2019-08-28 18:09
閱讀 1308·2019-08-26 13:35
閱讀 1783·2019-08-23 17:52
