> 此篇文章要跟大家分享的是分頁的切換功能，主要會以 BS5 Pagination 元件來做說明，那我們就開始吧！

### 加入分頁切換
由於後續許多頁面都會需要用到分頁切換，所以將分頁切換製作成一個元件。
* 參考 API 文件，可以看到取得產品列表的 API 網址後方可以加上 `page` 來判斷要呈現哪一頁的資訊
<img src="https://firebasestorage.googleapis.com/v0/b/emmablog-e5a1c.appspot.com/o/page.png?alt=media&token=53d1c56b-9ad0-4d86-b4cd-20e9a1229957">
* 故我們可以修改 ***ProductsPage.vue*** 其中 `getProducts()` 的參數如下：

    // 為 page 帶入預設值
    getProducts (page = 1) {
      const api = `${process.env.VUE_APP_API}api/${process.env.VUE_APP_PATH}/admin/products/?page=${page}`
      ...
    }

* 接著在 `console` 就可以看到分頁相關資訊
* `current_page` 當前頁面
* `total_pages` 總頁數
* `has_next` 是否有後一頁
* `has_pre` 是否有前一頁
<img src="https://firebasestorage.googleapis.com/v0/b/emmablog-e5a1c.appspot.com/o/console_page.png?alt=media&token=688b9296-47dc-4d5f-9ea2-c87adb90209b">

* 回到 `src > components` 新增 ***PaginationCard.vue***
* `active` 設定當前頁籤
* `disabled` 停用按鈕

  <template>
  <div class="d-flex justify-content-center">
    <nav aria-label="Page navigation example">
      <ul class="pagination">
          <!-- 前一頁 -->
        <li class="page-item" :class="{ 'disabled': pages.has_pre === false}">
          <a class="page-link" href="#" aria-label="Previous" @click.prevent="updatePage(pages.current_page-1)">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <!-- 所有頁數 -->
        <li class="page-item" v-for="page in pages.total_pages" :key="page" :class="{ 'active': page === pages.current_page}">
          <a class="page-link" href="#" @click.prevent="updatePage(page)">{{ page }}</a></li>
        <!-- 下一頁 -->
        <li class="page-item" :class="{ 'disabled': pages.has_next === false}">
          <a class="page-link" href="#" aria-label="Next" @click.prevent="updatePage(pages.current_page+1)">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
  </template>
  
  <script>
  export default {
    props: ['pages'],
    methods: {
      updatePage (page) {
        this.$emit('emit-pages', page)
      }
    }
  }
  </script>

* 接著到 ***ProductsPage.vue*** 插入 ***PaginationCard.vue*** 元件

  <PaginationCard :pages="pagination" 
                  @emit-pages="getProducts"></PaginationCard>

* 完成後即可在頁面下方看到頁碼並可切換：
<img src="https://firebasestorage.googleapis.com/v0/b/emmablog-e5a1c.appspot.com/o/pagination_demo.png?alt=media&token=f1965758-3a9f-440e-b930-8a58167138d3">