Vue 初心者筆記 #31 透過 Vue Router 的動態路由取得遠端資料
這篇筆記會介紹如何透過 Vue Router 的動態路由,來取得 Random User Generator API 的遠端資料。
通常我們會用這個方式決定 AJAX 所要讀入的資料 (ID),來切換頁面的顯示結果。
除了取得固定資料外,文章內也有介紹如何取得 Random User 隨機資料。
STEP 1:配置動態路由
:id
:動態路由
我們要把 Child3 這個 component
的路徑 (path
) 改為動態路由。
更改方式就是將 path
改為 'child/:id'
,這個 :id
就是一個動態的路由。
index.js(路由配置檔)
1 | export default new VueRouter({ |
export default
:匯出該物件,給予其它檔案 import 用
STEP 2:存取動態路由
this.$route.params.id
這段程式碼是讀取已經掛載在 Vue 裡的 $route
裡面的 params
方法,透過這個方法可以讀取到參數,其中一個就是 id
(自訂的)。
我們在 data
後面增加 created()
方法,讓元件生成時就執行上述方法,來存取動態路由。
child3.vue
1 | export default { |
現在輸入 http://localhost:8080/#/page/child3
已經沒有內容了,要改成 child/sealman
這個動態路由,才能取得頁面內容。
打開 Console 可以看到回傳 sealman
的值,這就是我們自訂的 id
。
接下來要說明如何透過 id
取得遠端資料。
STEP 3:使用 axios 套件取得遠端資料
我們要載入並使用 vue-axios 套件,來取得 Random User Generator API 裡面的遠端資料。
vue-axios 套件
安裝:
npm install --save axios vue-axios
載入 axios 到 Entry 並啟用:
1
2
3import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios, axios);可參考官方文件:vue-axios - npm
Random User 套件
- API :
https://randomuser.me/api/
- Seeds :
https://randomuser.me/api/?seed=sealman
完成載入 vue-axios 套件後,我們就可以直接調用資料看看,沒錯的話會回傳 Random User 的一筆隨機資料回來。
1 | export default { |
Seeds 方法
如果想取得固定的資料,可以使用 Random User 的 Seeds 方法,固定取得同一個資料。
使用上,只要將自訂的 id
加到固定資料網址最後面即可。
例如:
輸入網址為 http://localhost:8080/#/page/child/sealman
代表自訂的 id
為 sealman
,
此時會透過 const id = this.$route.params.id
將 id
的值設為 sealman
,
因此 get
到的固定資料就會是 https://randomuser.me/api/?seed=sealman 這個網址的資料。
1 | export default { |
這就是動態路由的使用方式,我們可以透過這個方式(自訂的 id
)來決定 AJAX 所要讀入的資料。
通常正式開發時,後端會定義 id
,前端則是套用 id
上去並把資料顯示出來。
STEP 4:取得隨機的假資料
以上是取得固定資料的方式,如果要取 Random User 提供的隨機假個資,可參考以下作法:
- 移除 child3.vue 的
?seed=${id}
- 把遠端資料賦予給 Vue 的
data
:vm.user = response.data.results[0]
- 將路徑配置改回
path: 'child3'
範例程式碼
child3.vue
1 | export default { |
index.js
1 | export default new VueRouter({ |
完成後進入 http://localhost:8080/#/page/child3
的頁面,就會顯示出隨機的假資料了。
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。