Vue Router資料獲取 vue篇

2021-10-10 06:12:06 字數 1223 閱讀 3734

有時候,進入某個路由後,需要從伺服器獲取資料。例如,在渲染使用者資訊時,你需要從伺服器獲取使用者的資料。我們可以通過兩種方式來實現:

從技術角度講,兩種方式都不錯 —— 就看你想要的使用者體驗是哪種。

當你使用這種方式時,我們會馬上導航和渲染元件,然後在元件的 created 鉤子中獲取資料。這讓我們有機會在資料獲取期間展示乙個 loading 狀態,還可以在不同檢視間展示不同的 loading 狀態。

>

class

="post"

>

v-if

="loading"

class

="loading"

>

loading...

div>

v-if

="error"

class

="error"

>

}div

>

v-if

="post"

class

="content"

>

>

}h2>

>

}p>

div>

div>

template

>

export default

},created () ,

watch: ,

methods: else })}

}}

通過這種方式,我們在導航轉入新的路由前獲取資料。我們可以在接下來的元件的beforerouteenter守衛中獲取資料,當資料獲取成功後只呼叫next方法。

export

default},

beforerouteenter

(to,

from

, next))}

,// 路由改變前,元件就已經渲染完了

// 邏輯稍稍不同

beforerouteupdate

(to,

from

, next))}

, methods:

else}}

}

在為後面的檢視獲取資料時,使用者會停留在當前的介面,因此建議在資料獲取期間,顯示一些進度條或者別的指示。如果資料獲取失敗,同樣有必要展示一些全域性的錯誤提醒。

以上來自vue官網,留下足跡!!!

vue router資料獲取

有時進入路由之後需要從伺服器獲取資料。例如在渲染使用者資訊時,需要從伺服器獲取使用者資料。我們可以有兩種方法來實現 一種是導航完成之後獲取,一種是導航之前獲取。先完成導航的,需要在接下來的元件生命週期鉤子中獲取資料,在資料獲取期間顯示 載入中 之類的提示。導航完成之前獲取資料的,在路由進入的守衛獲取...

Vue Router 傳遞資料的幾種方法

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

分級獲取資料,跨級獲取資料

原始資料結構 市區 區縣 公司 裝置 需求 給定市的code碼,只要該市的所有公司資訊及公司裝置資訊。開幹!基本思路 1.給定市的code碼,獲取該市下面的所有區 縣,存入陣列 areacode 2.公司和裝置資訊通過關聯預載入一起載入,再使用巢狀查詢in,判斷是否在以上的陣列中。第一步 獲取市下面...