当前位置：首页 > VUE

vue router实现分页

2026-03-07 18:42:01VUE

使用 Vue Router 实现分页

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

方法一：使用路由参数传递页码

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

// router.js
const routes = [
  {
    path: '/page/:pageNumber',
    name: 'Page',
    component: PageComponent,
    props: true
  }
]

在组件中使用 $route.params 获取页码：

// PageComponent.vue
export default {
  props: ['pageNumber'],
  watch: {
    pageNumber(newVal) {
      this.fetchData(newVal)
    }
  },
  methods: {
    fetchData(page) {
      // 根据页码获取数据
    }
  }
}

方法二：使用查询参数传递页码

在路由配置中不需要特殊设置，直接在链接中添加查询参数：

// 导航到分页
this.$router.push({ path: '/list', query: { page: 2 } })

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

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

方法三：结合 Vuex 管理分页状态

在 Vuex store 中定义分页状态：

// store.js
export default new Vuex.Store({
  state: {
    currentPage: 1
  },
  mutations: {
    setPage(state, page) {
      state.currentPage = page
    }
  }
})

在组件中同步路由和 Vuex 状态：

// PageComponent.vue
export default {
  computed: {
    currentPage: {
      get() {
        return this.$store.state.currentPage
      },
      set(page) {
        this.$store.commit('setPage', page)
        this.$router.push({ query: { page } })
      }
    }
  }
}

方法四：使用路由守卫处理分页

在全局路由守卫中处理分页逻辑：

// router.js
router.beforeEach((to, from, next) => {
  if (to.query.page && !isValidPage(to.query.page)) {
    next({ path: to.path, query: { page: 1 } })
  } else {
    next()
  }
})

方法五：创建分页组件

创建一个可复用的分页组件：

vue router实现分页

<!-- Pagination.vue -->
<template>
  <div class="pagination">
    <router-link
      v-for="page in totalPages"
      :key="page"
      :to="{ query: { page } }"
      :class="{ active: currentPage === page }"
    >
      {{ page }}
    </router-link>
  </div>
</template>

<script>
export default {
  props: {
    totalPages: Number,
    currentPage: Number
  }
}
</script>