当前位置：首页 > VUE

vue实现分页可以跳转

2026-01-22 11:13:29VUE

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 }
    });
  }
}