当前位置：首页 > 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 获取当前页码：

vue router实现分页

// 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 接收页码：

vue router实现分页

// 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

分享给朋友：

实现vue

安装Vue.js 通过npm安装Vue.js是最常见的方式。确保已安装Node.js和npm，运行以下命令： npm install vue 或者使用CDN直接引入： <script src…

vue筛选实现

Vue 筛选实现方法使用计算属性实现筛选计算属性是 Vue 中实现数据筛选的常用方式。通过定义一个计算属性，可以根据输入的条件动态过滤数据。 <template> <div…

vue 实现赋值

Vue 实现赋值的方法在 Vue 中，赋值操作通常涉及数据绑定和响应式更新。以下是几种常见的赋值方式：直接赋值给 data 属性在 Vue 实例的 data 对象中定义的属性可以直接通过 th…

vue实现checkbox

Vue 实现 Checkbox 在 Vue 中实现 Checkbox 可以通过原生 HTML 的 <input type="checkbox"> 或使用 Vue 的 v-model 指令绑…

vue实现banner

Vue实现Banner轮播使用Vue实现Banner轮播可以通过第三方库如swiper或vue-awesome-swiper，也可以手动实现基础轮播效果。以下是两种常见方法：使用vue-awes…

vue实现字幕

Vue 实现字幕功能在 Vue 中实现字幕功能可以通过动态绑定数据和 CSS 动画来实现。以下是具体实现方法： 1. 基础字幕组件创建一个字幕组件，通过 v-model 或 props 接收字…

vue router实现分页