当前位置：首页 > 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中实现卡片轮播可以通过结合v-for指令和动态样式绑定完成。核心是维护一个当前显示卡片的索引，通过CSS过渡效果实现平滑切换。基础实现步骤模板部分使用v-fo…

vue实现ai

Vue 实现 AI 功能 Vue.js 可以通过集成第三方 AI 服务或本地 AI 模型来实现 AI 功能。以下是几种常见的方法：集成第三方 AI API 使用 Vue 调用如 OpenAI、Go…

vue实现接口

在 Vue 中实现接口请求 Vue 本身不直接提供 HTTP 请求功能，通常需要借助第三方库如 axios 或 fetch 来实现接口请求。以下是几种常见方法：使用 axios 发送请求安装…

vue实现开关

Vue 实现开关组件的方法使用原生HTML和Vue数据绑定通过v-model绑定复选框的checked状态，结合CSS样式实现开关效果： <template> <labe…

vue实现抽奖

Vue 实现抽奖功能基本抽奖逻辑创建一个Vue组件，包含奖品列表、抽奖按钮和结果显示区域。使用随机数生成器选择奖品。 <template> <div> &l…

vue 实现modal

Vue 实现 Modal 的方法使用 Vue 原生组件通过 Vue 的组件系统可以轻松实现 Modal。创建一个可复用的 Modal 组件，通过 props 控制显示与隐藏。 <templ…

vue router实现分页