VueRouter進階三(數(shù)據(jù)獲取)

SimpleTriangle 發(fā)布于2019-08-22 11:05 / 2647人閱讀

摘要：在導(dǎo)航完成前獲取數(shù)據(jù)通過這種方式，我們在導(dǎo)航轉(zhuǎn)入新的路由前獲取數(shù)據(jù)。我們可以在接下來的組件的鉤子中獲取數(shù)據(jù)，當(dāng)數(shù)據(jù)獲取成功后只調(diào)用方法。

數(shù)據(jù)獲取 工具

我們可以使用 ajax 等工具.

我們這里使用了vue-resource

地址:
https://github.com/pagekit/vu...

導(dǎo)航完成后獲取數(shù)據(jù)

當(dāng)你使用這種方式時，我們會馬上導(dǎo)航和渲染組件，然后在組件的 mounted 鉤子中獲取數(shù)據(jù)。這讓我們有機會在數(shù)據(jù)獲取期間展示一個 loading 狀態(tài)，還可以在不同視圖間展示不同的 loading 狀態(tài)。

component:{
    data:function(){
        return {
            shuju:[]
        }
    },
    template:`
            
                {{shujuy.name}}
            
        `,
    mounted:function(){
        this.$http.get(url).then(response => {
            this.shuju = response.body;
        }, response => {

        });
    }
}

在導(dǎo)航完成前獲取數(shù)據(jù)

通過這種方式，我們在導(dǎo)航轉(zhuǎn)入新的路由前獲取數(shù)據(jù)。我們可以在接下來的組件的 beforeRouteEnter 鉤子中獲取數(shù)據(jù)，當(dāng)數(shù)據(jù)獲取成功后只調(diào)用 next 方法。

beforeRouteEnter (to, from, next) {
    Vue.http.get(url).then(response => {
    vm.no = false
    vm.shuju = response.body;
    next();
    }, response => {
    next("/")
}},

詳細(xì)資料:https://github.com/Smallmotor...

GPU云服務(wù)器云服務(wù)器 VueRouter Vue_VueRouter 數(shù)據(jù)挖掘進階數(shù)據(jù)分析進階

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91759.html

相關(guān)文章

VueRouter進階四(滾動行為)

摘要：滾動行為使用前端路由，當(dāng)切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。這個方法返回滾動位置的對象信息，長這樣如果返回一個布爾假的值，或者是一個空對象，那么不會發(fā)生滾動。滾動行為使用前端路由，當(dāng)切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時頁面...

kumfo 2019-08-22 11:05 評論0 收藏0
VueRouter進階（2）-路由元信息

摘要：簡單介紹主人公字段介紹我們稱每個路由對象為路由記錄，路由記錄可以嵌套。所以到我們匹配到一個路有的時候他有可能有多條路由記錄。路由元信息為什么會有這個東西呢？我們知道我們?yōu)g覽一些網(wǎng)站的時候有需要驗證登錄的也有不需要驗證登錄的，如果所有頁面都在做成驗證登錄的話對于用戶的體驗也是極差的，所以這個時候路由元信息就起到了很大的作用。簡單介紹主人公：meta字段介紹：我們稱每個路由對象為...

CoXie 2019-08-21 18:24 評論0 收藏0
VueRouter進階（1）-導(dǎo)航守衛(wèi)

摘要：簡介主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。判斷必要操作是否進行沒進行的話中斷跳轉(zhuǎn)。進行管道中的下一個鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是確認(rèn)的。中斷當(dāng)前的導(dǎo)航。如果傳入的參數(shù)是一個實例，則導(dǎo)航會被終止且該錯誤會被傳遞給注冊過的回調(diào)。簡介主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。例如判斷登錄信息：沒登錄全部跳到登錄頁。判斷必要操作是否進行沒進行的話中斷跳轉(zhuǎn)。分為三大類：全局守衛(wèi)...

renweihub 2019-08-21 18:22 評論0 收藏0
VueRouter進階一(導(dǎo)航鉤子和路由元信息)

摘要：有多種方式可以在路由導(dǎo)航發(fā)生時執(zhí)行鉤子全局的單個路由獨享的或者組件級的。進行管道中的下一個鉤子。當(dāng)前的導(dǎo)航被中斷，然后進行一個新的導(dǎo)航。通過訪問組件實例路由元信息你可以在中直接訪問。導(dǎo)航鉤子 vue-router 提供的導(dǎo)航鉤子主要用來攔截導(dǎo)航，讓它完成跳轉(zhuǎn)或取消。有多種方式可以在路由導(dǎo)航發(fā)生時執(zhí)行鉤子：全局的, 單個路由獨享的, 或者組件級的。全局鉤子你可以使用 router....

liukai90 2019-08-22 11:05 評論0 收藏0
【進階3-5期】深度解析 new 原理及模擬實現(xiàn)

摘要：使用指定的參數(shù)調(diào)用構(gòu)造函數(shù)，并將綁定到新創(chuàng)建的對象。由構(gòu)造函數(shù)返回的對象就是表達(dá)式的結(jié)果。情況返回以外的基本類型實例中只能訪問到構(gòu)造函數(shù)中的屬性，和情況完全相反，結(jié)果相當(dāng)于沒有返回值。定義 new 運算符創(chuàng)建一個用戶定義的對象類型的實例或具有構(gòu)造函數(shù)的內(nèi)置對象的實例。 ——（來自于MDN）舉個栗子 function Car(color) { this.color = co...

Baaaan 2019-08-23 14:31 評論0 收藏0