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

分享给朋友：

vue前端实现注册

使用 Vue 实现用户注册功能环境准备确保已安装 Vue CLI 或通过 CDN 引入 Vue。若使用 Vue CLI，需安装 axios 或其他 HTTP 库用于后端通信。注册表单组件创建…

vue优秀实现

Vue.js 优秀实现方法响应式数据管理使用 Vue 的 ref 和 reactive 处理基础类型和对象类型数据，结合 computed 计算属性优化渲染性能。对于复杂状态，推荐 Pinia 替…

vue实现app

Vue 实现 App 的常见方法使用 Vue 开发移动端 App 主要有两种主流方案：混合开发（Hybrid）和原生渲染。以下是具体实现方式和工具链：混合开发方案（WebView 嵌入）通过…

vue实现过滤

Vue实现过滤的方法在Vue中实现数据过滤可以通过多种方式完成，以下是几种常见的方法：使用计算属性过滤计算属性是Vue中处理数据过滤的理想选择，它们基于响应式依赖进行缓存，只有在相关依赖发生改…

vue事件实现

Vue 事件实现方法在Vue中，事件处理是通过v-on指令或@简写来实现的。以下是几种常见的事件处理方式：使用v-on指令绑定事件 <button v-on:click="handleC…

vue怎么实现直播

Vue实现直播的方法使用Vue实现直播功能通常需要结合第三方直播服务或WebRTC技术。以下是几种常见的实现方式：使用第三方直播服务集成如腾讯云、阿里云或七牛云等提供的直播SDK，通过他们的A…

vue router实现分页