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

mcterry 發(fā)布于2019-08-20 16:05 / 2412人閱讀

摘要：利用配合搭建一個完整的流程一在一中寫到了主要頁面的編寫，現(xiàn)在開始三個路由頁面的編寫。每個列表綁定跳轉(zhuǎn)到詳情頁的函數(shù)。整體思想通過監(jiān)控的變化，變化后執(zhí)行函數(shù)，隨后重新獲取數(shù)據(jù)。

上篇文章太長了，編寫時拖動太麻煩，重開一篇。
利用vue-cli配合vue-router搭建一個完整的spa流程（一）

在（一）中寫到了主要頁面的編寫，現(xiàn)在開始三個路由頁面的編寫。

第一步：路由實例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 這個一開始沒有安裝，打開項目右鍵打開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有倆部分組成：


    
        
            
                
                    首頁
                    頁面一
                
            
        
    
    
        
            
                
            
            
                
                {{item.content | more}}

↑ 這是第一部分，包含導航與當前分類中全部內(nèi)容的一個列表。

①： v-show="routerData.mainShow" 這個控制整體部分顯示隱藏，與上一頁，下一頁按鈕為相同的控制數(shù)據(jù)，因為二者顯示，隱藏邏輯是一樣的。都是在詳情頁隱藏，主頁顯示。

②： v-on:click="link(0)" 導航按鈕跳轉(zhuǎn)綁定的函數(shù)。

③： v-for="(item,index) in routerData.showData" 循環(huán)數(shù)據(jù)，渲染列表。

④： v-on:click="go(item,index)" 每個列表綁定跳轉(zhuǎn)到詳情頁的函數(shù)。

⑤： {{item.content | more}} 渲染簡介，并且通過一個過濾器使內(nèi)容中數(shù)字過多時，進行剪切

↑ 這是第二部分，子路由入口。v-bind:router-nesting="routerData" 給子路有中渲染頁面的數(shù)據(jù)。

接下來是script部分

首先引入router實例 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)容點擊時執(zhí)行的函數(shù)，從 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）函數(shù)是導航點擊綁定的函數(shù)，通過傳志 num 將 url 轉(zhuǎn)換為對應的分類，從而觸發(fā) watch 重新獲取數(shù)據(jù)。這里加了一個判斷，重復點擊，無效。

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

↑ 過濾器，剪切字數(shù)。

style就不解釋了

Ⅱ： showtwo.vue

這個是文件是詳情頁面，即主頁面中的列表內(nèi)容點擊后，跳轉(zhuǎn)的頁面。

↑ 數(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ù)。

Ⅲ： error.vue

↑ 嗯~ o(￣▽￣)o，這個比較簡單，不做解釋了。

結(jié)語

至此，全部都解清楚了，按照步驟來的話一個簡單的spa也初見其形。

整體思想：通過watch監(jiān)控url的變化，變化后執(zhí)行routerPath（）函數(shù)，隨后重新獲取數(shù)據(jù)。

新手，有錯誤，和需要指正的地方歡迎留言！

后續(xù)會有其他實例項目詳解，至于時間嘛，這要看什么時候找到工作了(ˉ▽ˉ；)...

GPU云服務器云服務器一個完整的python程序最小二乘法擬合算法流程圖怎樣搭建一個.com的網(wǎng)站怎么搭建一個自己的視頻網(wǎng)站

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/82703.html

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

摘要：利用配合搭建一個完整的流程二前言所用的一些基本操作。全局安裝創(chuàng)建一個基于的模板創(chuàng)建過程中，為必須，其他語法檢測，單元測試等按需求安裝。為入口文件，的實例在這里書寫。掛載在中的標簽上。定時器的作用是模擬數(shù)據(jù)請求延時。 2017/5/9 更新！GitHubpages搞了下，PC可以瀏覽。↓ https://15901233752.github.io... showImg(https://...

cgh1999520 2019-08-20 16:01 評論0 收藏0
webpack配合vue.js實現(xiàn)完整的單頁面demo

摘要：本篇文章主要是我在開發(fā)前研究了的單頁面應用，因為需要用到的，所以確保安裝了，建議官網(wǎng)安裝最新的穩(wěn)定版本。本文章只是和大家探討怎么利用配合做一個單頁面應用，具體關于里面的內(nèi)容怎么寫并不在本篇文章的介紹范圍。本篇文章主要是我在開發(fā)前研究了webpack+vue.js的單頁面應用，因為需要用到node的npm，所以確保安裝了node，建議官網(wǎng)安裝最新的穩(wěn)定版本。并且在項目中需要加載一些np...

2450184176 2019-08-19 18:35 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0