Skip to main content

实现上一页下一页分页按钮跳转功能

本节课，我们将学习如何实现上一页或下一页页面跳转功能。

首先，我们需要定义一个跳转方法。在Vue中，我们可以通过定义methods来实现。我们创建一个名为goToPage的方法，并为其传递一个参数，即page页码。当用户点击时，我们将利用Vue的路由对象this.$router，并使用push方法来实现页面跳转。跳转时，我们需要传递一个参数query，其值为page，即带上我们要传递的页码参数。那么我们还需要计算当前页码，上一页和下一页的page分别是什么。

Page.vue代码如下：

frontend/src/components/Page.vue
<script>
export default {
  name: "Page",
  data: function () {
    return {
      current: 1,
    };
  },
  props: ["info"],
  computed: {
    lastPage() {
      let pageSize = 12;
      return Math.ceil(this.info.count / pageSize);
    },

    prePage() {
      if (this.current > 1) {
        return this.current - 1;
      }
      return 1;
    },

    nextPage() {
      if (this.current < this.lastPage) {
        return this.current + 1;
      }
      return this.current;
    },
  },
  mounted() {
    this.current = this.getPageFromUrl();
  },
  methods: {
    getPageFromUrl() {
      const page = Number(this.$route.query.page);
      return page ? page : 1;
    },
    goToPage(page) {
      this.current = page;
      this.$router.push({ query: { page } });
    },
  },
};
</script>
代码解析

这段Vue代码实现了一个分页组件的基本功能。下面是对该组件各部分的解释：

1. 组件名称与数据定义​

  • name: "Page": 定义了组件的名称为Page。
  • data 函数: 返回一个对象，其中定义了组件的响应式数据。
    • current: 用于跟踪当前的页码，默认值为1。

2. Props​

  • props: ["info"]: 组件接受一个名为info的prop，通常来自父组件。info对象预期包含与分页相关的数据，例如总记录数。

3. 计算属性（computed）​

计算属性基于响应式依赖进行缓存，仅在相关依赖发生改变时重新计算。

  • lastPage: 计算最后一页的页码。它通过将总记录数this.info.count除以每页的记录数（pageSize，这里设为12），并使用Math.ceil向上取整得到。
  • prePage: 计算上一页的页码。如果当前页码current大于1，上一页为current - 1，否则上一页为1。
  • nextPage: 计算下一页的页码。如果当前页码current小于最后一页lastPage，下一页为current + 1，否则保持当前页码不变。

4. 生命周期钩子（mounted）​

  • mounted: 在组件被挂载到DOM后执行。这里它用于设置初始的页码，通过调用getPageFromUrl方法从URL中获取页码。

5. 方法（methods）​

这里定义了组件的方法，用于实现分页逻辑。

  • getPageFromUrl: 从URL的查询参数中获取page参数，并将其转换为数字类型。如果page存在且有效，则返回该值，否则返回1（默认页码）。
  • goToPage: 负责处理页码的跳转逻辑。
    • 首先，设置current为传入的page参数。
    • 最后，使用Vue Router的push方法更新URL，从而触发页面跳转。

总结来说，这个Vue组件定义了分页的数据状态、计算最后一页、上一页和下一页的逻辑，并提供了从URL获取页码以及跳转到特定页码的方法。通过与Vue Router的集成，它能够在不重新加载整个页面的情况下更新视图，为用户提供了流畅的分页导航体验。

之后，我们将处理点击事件。在Vue中，我们可以使用@click来添加点击事件。比如，当点击上一页时，我们调用goToPage方法，并传递prePage作为参数。点击下一页时，逻辑也是类似的。 Page.vue代码如下：

frontend/src/components/Page.vue
<span v-if="info.previous" @click="goToPage(prePage)" class="page-link" href="javascript:void(0)">

 <a v-if="info.next" @click="goToPage(nextPage)" class="page-link" href="javascript:void(0)">

在首页中，再次点击“上一页”和“下一页”时，url中的page参数就会变化，但是现在页面内容还没有变化，下节课我们再来实现这些功能。

图21-页码变化