vue保留页码

---

保留页码

可以使用 v-bind 指令将组件的 props 绑定到路由参数，然后通过路由参数来保留页码

例如，假设你有一个组件 PaginatedList，它接受一个 page prop，表示当前页码。你想要在路由跳转时保留当前页码。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、首先，你需要在路由定义中添加一个带有 :page 参数的路由

示例：

const routes = [
  {
    path: '/paginated-list/:page',
    component: PaginatedList
  }
]

二、实现方法

1. 绑定到路由参数

在组件中使用 v-bind 指令将 page prop 绑定到路由参数：

<template>
  <PaginatedList v-bind:page="$route.params.page" />
</template>

这样，当你在应用中跳转到 /paginated-list/2 时，PaginatedList 组件的 page prop 将被设置为 2，并且在路由跳转时页码将被保留。

2. watch 监视 $route 的变化

代码如下（示例）：

<template>
  <PaginatedList v-bind:page="page" />
</template>

<script>
export default {
  props: ['page'],
  watch: {
    '$route': function (to, from) {
      this.page = to.params.page
      this.loadData()
    }
  },
  methods: {
    loadData() {
      // 加载数据
    }
  }
}
</script>

---