当前位置：首页 > VUE

vue router实现分页

2026-01-08 04:48:45VUE

Vue Router 实现分页的方法

在 Vue.js 中，可以通过 Vue Router 实现分页功能，通常需要结合路由参数和动态路由匹配。以下是几种常见的实现方式：

使用查询参数实现分页

在路由配置中，可以设置查询参数来传递页码信息。例如：

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

在组件中，可以通过 this.$route.query.page 获取当前页码：

// Items.vue
export default {
  computed: {
    currentPage() {
      return parseInt(this.$route.query.page) || 1
    }
  },
  methods: {
    goToPage(page) {
      this.$router.push({ query: { ...this.$route.query, page } })
    }
  }
}

使用动态路由实现分页

另一种方式是通过动态路由参数传递页码：

// 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
    }
  },
  methods: {
    goToPage(page) {
      this.$router.push(`/items/${page}`)
    }
  }
}

结合分页组件实现

可以结合第三方分页组件（如 vue-paginate）实现完整的分页功能：

<template>
  <div>
    <paginate
      v-model="currentPage"
      :page-count="totalPages"
      :click-handler="goToPage"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalPages: 10
    }
  },
  computed: {
    currentPage: {
      get() {
        return parseInt(this.$route.query.page) || 1
      },
      set(value) {
        this.goToPage(value)
      }
    }
  },
  methods: {
    goToPage(page) {
      this.$router.push({ query: { ...this.$route.query, page } })
    }
  }
}
</script>

注意事项

确保在路由变化时重新获取数据，可以通过 watch 监听路由变化：

watch: {
  '$route.query.page'(newPage) {
    this.fetchData(newPage)
  }
}

对于 SEO 友好的分页，建议使用动态路由方式而非查询参数。
在服务器端渲染（SSR）应用中，需要确保分页逻辑在客户端和服务器端都能正常工作。

vue router实现分页

标签: 分页 vue

分享给朋友：

vue 实现长列表

Vue 实现长列表的优化方案虚拟滚动技术虚拟滚动是处理长列表的高效方式，仅渲染可视区域内的元素。通过计算滚动位置动态加载和卸载DOM节点，大幅减少内存占用和渲染压力。 <template&…

vue实现选择季度

Vue 实现选择季度的几种方法使用下拉选择框（Select）在 Vue 中可以通过 v-model 绑定一个下拉选择框来实现季度选择。数据可以预先定义为一个包含季度选项的数组。 <…

vue手动实现弹窗

实现弹窗组件的基本结构在Vue中手动实现弹窗组件，需要创建一个独立的弹窗组件，并通过props控制其显示与隐藏。弹窗组件通常包含遮罩层、内容区域和关闭按钮。 <template>…

vue实现好友列表

实现好友列表的Vue组件数据准备在Vue组件的data中定义好友列表数据，通常是一个数组对象，每个对象包含好友的基本信息如ID、头像、昵称等。 data() { return {…

vue实现访问量

Vue 实现访问量统计的方法使用前端计数在 Vue 中可以通过简单的计数器实现页面访问量的统计。这种方法适合小型项目或演示用途。 // 在 Vue 组件中 data() { return…

vue如何实现到期提醒

实现 Vue 到期提醒功能使用计算属性计算剩余时间在 Vue 组件中定义一个计算属性，计算目标日期与当前日期的差值。通过 Date 对象获取时间戳并计算剩余天数或小时数。 computed: {…

vue router实现分页