STEP 1:配置動態路由

  • :id:動態路由

我們要把 Child3 這個 component 的路徑 (path) 改為動態路由。
更改方式就是將 path 改為 'child/:id',這個 :id 就是一個動態的路由。

index.js(路由配置檔)

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

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 並啟用:

    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 的一筆隨機資料回來。

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 這個網址的資料。

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

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

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

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