vue router資料獲取

2021-08-19 18:43:22 字數 881 閱讀 9866

有時進入路由之後需要從伺服器獲取資料。例如在渲染使用者資訊時,需要從伺服器獲取使用者資料。

我們可以有兩種方法來實現:

一種是導航完成之後獲取,一種是導航之前獲取。

先完成導航的,需要在接下來的元件生命週期鉤子中獲取資料,在資料獲取期間顯示【載入中】之類的提示。

導航完成之前獲取資料的,在路由進入的守衛獲取資料,資料獲取完了再完成導航。

導航完成後獲取資料

在元件的created鉤子中獲取資料。這讓我們有機會在資料獲取期間展示乙個loading狀態,還可以在不同檢視間展示不同的loading狀態。

class="post">

class="loading" v-if="loading">loading...

if="error"

class="error">

}if="post"

class="condtent">}

template>

export

default

}, created(),

watch:,

methods:else

})} }

}

在導航完成前獲取資料

在元件的beforerouteenter守衛中獲取資料,當資料獲取成功後只呼叫next方法。

export

default

}, beforerouteenter(to,from,next))

}, beforerouteupdate

(to,from,next))

}, methods:else

} }}

Vue Router資料獲取 vue篇

有時候,進入某個路由後,需要從伺服器獲取資料。例如,在渲染使用者資訊時,你需要從伺服器獲取使用者的資料。我們可以通過兩種方式來實現 從技術角度講,兩種方式都不錯 就看你想要的使用者體驗是哪種。當你使用這種方式時,我們會馬上導航和渲染元件,然後在元件的 created 鉤子中獲取資料。這讓我們有機會在...

Vue Router 傳遞資料的幾種方法

官方文件vue router 1.通過 path 傳遞this.router.push this.router.push user 注 這樣傳遞引數的話,配置路由的時候需要在 path 上加引數 path user userid 這種接收引數的方式是 this.route.params.userid...

vue router頁面跳轉

vue router的教程位址 我們在建立專案的時候命令列如下 vue init webpack my project cd my project npm install npm run dev最新的專案已經自動安裝了vue router 下面介紹步驟 class tab class tab ite...