vue router实现分页
使用 Vue Router 实现分页功能
在 Vue.js 项目中，可以通过 Vue Router 结合动态路由和查询参数来实现分页功能。以下是具体实现方法：
配置动态路由
在 router/index.js 中配置动态路由参数 page，用于捕获当前页码：
const routes = [
{
path: '/list/:page?',
name: 'List',
component: () => import('../views/List.vue'),
props: true
}
]组件内处理分页逻辑
在列表组件中，通过 watch 监听路由参数变化，并加载对应页码的数据：
export default {
props: ['page'],
data() {
return {
currentPage: 1,
items: [],
totalPages: 0
}
},
watch: {
page: {
immediate: true,
handler(newPage) {
this.currentPage = newPage ? parseInt(newPage) : 1
this.fetchData()
}
}
},
methods: {
fetchData() {
// 模拟API请求
const mockData = {
data: [...], // 当前页数据
total: 100 // 总数据量
}
this.items = mockData.data
this.totalPages = Math.ceil(mockData.total / 10)
},
changePage(newPage) {
if (newPage > 0 && newPage <= this.totalPages) {
this.$router.push(`/list/${newPage}`)
}
}
}
}模板中的分页控件
在模板中添加分页导航，使用 router-link 或编程式导航：
<template>
<div>
<!-- 列表内容 -->
<div v-for="item in items" :key="item.id">
{{ item.name }}
</div>
<!-- 分页控件 -->
<div class="pagination">
<button
@click="changePage(currentPage - 1)"
:disabled="currentPage === 1"
>
上一页
</button>
<span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
<button
@click="changePage(currentPage + 1)"
:disabled="currentPage === totalPages"
>
下一页
</button>
</div>
</div>
</template>使用查询参数替代动态路由
如果需要更灵活的分页方案，可以使用查询参数：
// 路由配置
{
path: '/list',
name: 'List',
component: () => import('../views/List.vue')
}
// 组件内导航方法
changePage(newPage) {
this.$router.push({
path: '/list',
query: { page: newPage }
})
}
// 获取当前页
this.currentPage = parseInt(this.$route.query.page) || 1处理初始页面加载
在 created 生命周期中处理初始页面加载：
created() {
if (!this.page && this.$route.params.page) {
this.currentPage = parseInt(this.$route.params.page)
}
this.fetchData()
}这种方法实现了基于 Vue Router 的分页功能，保持了 URL 与页面状态的同步，支持浏览器前进/后退导航，并可以通过直接输入URL访问特定页码。
