当前位置：首页 > VUE

vue router实现分页

2026-01-14 02:11:28VUE

使用 Vue Router 实现分页

在 Vue.js 项目中，可以通过 Vue Router 结合分页组件实现分页功能。以下是实现分页的几种方法：

使用路由参数传递页码

在路由配置中定义一个动态参数来传递页码：

// router/index.js
const routes = [
  {
    path: '/items/:page',
    name: 'Items',
    component: () => import('../views/Items.vue'),
    props: true
  }
]

在组件中通过 props 接收页码：

// Items.vue
export default {
  props: {
    page: {
      type: [String, Number],
      default: 1
    }
  },
  watch: {
    page(newVal) {
      this.fetchData(newVal)
    }
  },
  methods: {
    fetchData(page) {
      // 根据页码获取数据
    }
  }
}

使用查询参数传递页码

另一种方式是通过查询参数传递页码：

// 跳转到指定页码
this.$router.push({ path: '/items', query: { page: 2 } })

在组件中通过 this.$route.query.page 获取页码：

// Items.vue
export default {
  watch: {
    '$route.query.page'(newVal) {
      this.fetchData(newVal)
    }
  }
}

结合分页组件

在模板中使用分页组件，并绑定到路由：

<template>
  <div>
    <!-- 数据列表 -->
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>

    <!-- 分页组件 -->
    <Pagination 
      :current-page="parseInt($route.params.page) || 1"
      :total-pages="totalPages"
      @page-changed="onPageChange"
    />
  </div>
</template>

分页组件的实现：

// Pagination.vue
export default {
  props: {
    currentPage: Number,
    totalPages: Number
  },
  methods: {
    onPageChange(page) {
      this.$router.push(`/items/${page}`)
    }
  }
}

处理初始加载

确保组件在初始加载时也能获取数据：

// Items.vue
export default {
  created() {
    this.fetchData(this.$route.params.page || 1)
  }
}

分页样式和逻辑

分页组件可以包含常见的分页样式和逻辑：

vue router实现分页

<template>
  <div class="pagination">
    <button 
      v-for="page in pages" 
      :key="page"
      :class="{ active: page === currentPage }"
      @click="onPageChange(page)"
    >
      {{ page }}
    </button>
  </div>
</template>

通过以上方法，可以在 Vue Router 中实现分页功能，同时保持 URL 与页面状态的同步。