vue axios 是前端開發中常用的工具之一，可以用來處理網絡請求和數據傳輸。在開發過程中，分頁是一個常用的功能，讓頁面展示更加清晰明了，同時也方便用戶查找需要的數據。

下面將演示如何使用 vue axios 實現分頁功能。在這里我們需要引入 axios 和 vue-pagination-2 兩個插件。

// 引入 axios 和 vue-pagination-2
import axios from 'axios'
import VuePagination from 'vue-pagination-2'

在 HTML 中添加分頁組件，同時設置一些參數，如每頁顯示數量，當前頁碼等等。

接下來，在 JS 文件中編寫相關代碼，主要分為以下幾步：

第一步：設置頁面初始值，并定義獲取數據的函數。

data() {
return {
posts: [],
total: 0,
perPage: 10, // 每頁顯示數量
currentPage: 1, // 當前頁碼
}
},
methods: {
loadPosts(page) {
axios.get(`/api/posts?page=${page}&perPage=${this.perPage}`)
.then(response =>{
this.posts = response.data.data
this.total = response.data.total
})
.catch(error =>console.log(error))
}
}

第二步：定義點擊頁碼觸發的事件。

pageChanged(page) {
this.currentPage = page
this.loadPosts(page)
}

第三步：在 mounted 鉤子中調用獲取數據的函數。

mounted() {
this.loadPosts(this.currentPage)
}

這樣就完成了 vue axios 分頁的實現，可以通過設置不同的參數來實現更多的功能。