vue实现分页可以跳转
Vue 实现分页跳转的方法
在 Vue 中实现分页跳转功能，通常需要结合分页组件和路由管理。以下是几种常见的实现方式：
使用第三方分页组件（如 Element UI）
Element UI 的 el-pagination 组件内置了分页跳转功能，可直接使用：
<template>
<el-pagination
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
:total="total"
layout="prev, pager, next, jumper">
</el-pagination>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
pageSize: 10,
total: 100
}
},
methods: {
handleCurrentChange(val) {
this.currentPage = val;
this.fetchData();
},
fetchData() {
// 根据 currentPage 获取数据
}
}
}
</script>自定义分页组件实现跳转
如果需要完全自定义分页逻辑，可以手动实现输入框跳转：
<template>
<div class="pagination">
<button @click="goToPage(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
<span v-for="page in pages" :key="page" @click="goToPage(page)">{{ page }}</span>
<input v-model="inputPage" @keyup.enter="jumpToPage" />
<button @click="goToPage(currentPage + 1)" :disabled="currentPage === totalPages">下一页</button>
</div>
</template>
<script>
export default {
props: ['currentPage', 'totalPages'],
data() {
return {
inputPage: ''
}
},
computed: {
pages() {
// 生成页码数组逻辑
}
},
methods: {
goToPage(page) {
if (page >= 1 && page <= this.totalPages) {
this.$emit('page-change', page);
}
},
jumpToPage() {
const page = parseInt(this.inputPage);
if (!isNaN(page)) {
this.goToPage(page);
}
}
}
}
</script>结合路由的分页跳转
如果分页需要反映在 URL 中（如 /list?page=2），可以通过路由管理：
// 路由配置
{
path: '/list',
name: 'List',
component: List,
props: route => ({ page: parseInt(route.query.page) || 1 })
}
// 组件内
watch: {
'$route.query.page'(newPage) {
this.currentPage = newPage;
this.fetchData();
}
},
methods: {
goToPage(page) {
this.$router.push({
query: { ...this.$route.query, page }
});
}
}注意事项
- 输入框跳转需验证页码的有效性（正整数且在总页数范围内）
- 对于大数据量分页，建议采用后端分页，每次跳转时请求对应页的数据
- 移动端可考虑添加手势滑动切换页面的交互
以上方法可根据具体项目需求选择或组合使用。第三方组件库通常提供更完善的功能（如每页条数切换），而自定义组件则灵活性更高。
