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 代表自訂的 id 為 sealman，
此時會透過 const id = this.$route.params.id 將 id 的值設為 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 的 data：vm.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

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