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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export default new VueRouter({
routes: [{
// omit
},
{
name: '',
path: '/page',
component: Page,
children: [
{ // omit },
{ // omit },
{
name: '卡片 3',
path: 'child/:id', // :id = 動態路由
component: Child3,
}
]
}
]
});

export default:匯出該物件,給予其它檔案 import 用

STEP 2:存取動態路由

  • this.$route.params.id

這段程式碼是讀取已經掛載在 Vue 裡的 $route 裡面的 params 方法,透過這個方法可以讀取到參數,其中一個就是 id(自訂的)。
我們在 data 後面增加 created() 方法,讓元件生成時就執行上述方法,來存取動態路由。

child3.vue

1
2
3
4
5
6
7
8
export default {
data() {
return {};
},
created() {
console.log(this.$route.params.id);
},
};

現在輸入 http://localhost:8080/#/page/child3 已經沒有內容了,要改成 child/sealman 這個動態路由,才能取得頁面內容。
打開 Console 可以看到回傳 sealman 的值,這就是我們自訂的 id
接下來要說明如何透過 id 取得遠端資料。

STEP 3:使用 axios 套件取得遠端資料

我們要載入並使用 vue-axios 套件,來取得 Random User Generator API 裡面的遠端資料。

vue-axios 套件

  1. 安裝:npm install --save axios vue-axios

  2. 載入 axios 到 Entry 並啟用:

    1
    2
    3
    import 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

可參考官方文件:Random User Generator | Documentation

完成載入 vue-axios 套件後,我們就可以直接調用資料看看,沒錯的話會回傳 Random User 的一筆隨機資料回來。

1
2
3
4
5
6
7
8
9
10
11
export default {
data() {
return {};
},
created() {
// 使用 axios 套件取得遠端資料
this.$http.get('https://randomuser.me/api/').then((response) => {
console.log(response);
});
},
};

Seeds 方法

如果想取得固定的資料,可以使用 Random User 的 Seeds 方法,固定取得同一個資料。
使用上,只要將自訂的 id 加到固定資料網址最後面即可。

例如:
輸入網址為 http://localhost:8080/#/page/child/sealman 代表自訂的 idsealman
此時會透過 const id = this.$route.params.idid 的值設為 sealman
因此 get 到的固定資料就會是 https://randomuser.me/api/?seed=sealman 這個網址的資料。

1
2
3
4
5
6
7
8
9
10
11
12
13
export default {
data() {
return {};
},
created() {
console.log(this.$route.params.id);
const id = this.$route.params.id;
// 把 id 加到網址上 (ES6 的字串模板)
this.$http.get(`https://randomuser.me/api/?seed=${id}`).then((response) => {
console.log(response);
});
},
};

這就是動態路由的使用方式,我們可以透過這個方式(自訂的 id)來決定 AJAX 所要讀入的資料。
通常正式開發時,後端會定義 id,前端則是套用 id 上去並把資料顯示出來。

STEP 4:取得隨機的假資料

以上是取得固定資料的方式,如果要取 Random User 提供的隨機假個資,可參考以下作法:

  1. 移除 child3.vue 的 ?seed=${id}
  2. 把遠端資料賦予給 Vue 的 datavm.user = response.data.results[0]
  3. 將路徑配置改回 path: 'child3'

範例程式碼

child3.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export default {
data() {
return {
user: {
picture: {},
},
};
},
created() {
// 隨機載入
const vm = this;
this.$http.get(`https://randomuser.me/api/`).then((response) => {
// console.log(response);
vm.user = response.data.results[0];
});
},
};

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
export default new VueRouter({
routes: [
{
name: '首頁',
path: '/index',
component: Home,
},
{
// name: '分頁',
path: '/page',
component: Page,
children: [
{
name: '卡片 1',
path: '',
component: Child,
},
{
name: '卡片 2',
path: 'child2',
component: Child2,
},
{
name: '卡片 3',
path: 'child3', // 隨機載入
component: Child3,
},
],
},
],
});

完成後進入 http://localhost:8080/#/page/child3 的頁面,就會顯示出隨機的假資料了。

Random User API

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。