VueRouter進階三(數據獲取)

SimpleTriangle 發布于2019-08-22 11:05 / 2643人閱讀

摘要：在導航完成前獲取數據通過這種方式，我們在導航轉入新的路由前獲取數據。我們可以在接下來的組件的鉤子中獲取數據，當數據獲取成功后只調用方法。

數據獲取 工具

我們可以使用 ajax 等工具.

我們這里使用了vue-resource

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

導航完成后獲取數據

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

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

        });
    }
}

在導航完成前獲取數據

通過這種方式，我們在導航轉入新的路由前獲取數據。我們可以在接下來的組件的 beforeRouteEnter 鉤子中獲取數據，當數據獲取成功后只調用 next 方法。

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

詳細資料:https://github.com/Smallmotor...

GPU云服務器云服務器 VueRouter Vue_VueRouter 數據挖掘進階數據分析進階

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/91759.html

VueRouter進階四(滾動行為)

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

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

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

CoXie 2019-08-21 18:24 評論0 收藏0
VueRouter進階（1）-導航守衛

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

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

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

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

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

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