当前位置：首页 > VUE

vue实现分页可以跳转

2026-02-23 02:14:09VUE

Vue 实现分页跳转功能

在 Vue 中实现分页跳转功能通常需要结合分页组件和路由管理。以下是几种常见的实现方式：

使用 Element UI 分页组件

Element UI 提供了现成的分页组件 el-pagination，支持跳转功能：

<template>
  <el-pagination
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total"
    layout="prev, pager, next, jumper"
    @current-change="handleCurrentChange"
  />
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
      // 加载对应页的数据
      this.loadData()
    },
    loadData() {
      // 根据 currentPage 和 pageSize 请求数据
    }
  }
}
</script>

layout 属性中的 jumper 启用跳转输入框。
@current-change 监听页码变化。

自定义分页组件

如果需要完全自定义分页逻辑，可以手动实现跳转功能：

<template>
  <div class="pagination">
    <input v-model="jumpPage" type="number" min="1" :max="totalPages" />
    <button @click="handleJump">跳转</button>
  </div>
</template>

<script>
export default {
  props: ['currentPage', 'totalPages'],
  data() {
    return {
      jumpPage: this.currentPage
    }
  },
  methods: {
    handleJump() {
      if (this.jumpPage >= 1 && this.jumpPage <= this.totalPages) {
        this.$emit('page-change', parseInt(this.jumpPage))
      }
    }
  }
}
</script>

通过 v-model 绑定跳转页码输入框。
点击跳转按钮时触发 page-change 事件。

结合路由实现分页跳转

如果需要通过 URL 参数保存当前页码：

// 路由配置
{
  path: '/list/:page',
  component: List
}

<template>
  <el-pagination
    :current-page="parseInt($route.params.page)"
    @current-change="handlePageChange"
  />
</template>

<script>
export default {
  methods: {
    handlePageChange(page) {
      this.$router.push(`/list/${page}`)
    }
  }
}
</script>

通过路由参数 :page 保存当前页码。
切换页码时更新路由。