Laravel VueJs分页：更新数据后保持当前页码的实现方案

要保持当前页码，核心是保存当前页码状态，并在更新后重新请求数据时带上这个页码参数，具体实现步骤如下：

1. 在Vue组件中定义变量存储当前页码

<script>
export default {
  data() {
    return {
      laravelData: {},
      currentPage: 1 // 新增变量保存当前页码
    }
  },
  methods: {
    // 修改getResults方法，接收页码参数，默认用currentPage
    getResults(page = this.currentPage) {
      this.currentPage = page; // 更新当前页码
      // 请求API时带上page参数
      axios.get('/api/your-data-endpoint', {
        params: { page: page }
      }).then(response => {
        this.laravelData = response.data;
      });
    },
    // 你的更新操作方法
    updateItem(item) {
      axios.put(`/api/items/${item.id}`, item)
        .then(() => {
          // 更新完成后，调用getResults，传入当前保存的页码
          this.getResults(this.currentPage);
        });
    }
  },
  mounted() {
    this.getResults();
  }
}
</script>

2. 调整分页组件的事件绑定
   确保分页组件的pagination-change-page事件触发时，把新页码传给getResults：

<Pagination :data="laravelData" @pagination-change-page="getResults" />

3. 后端Laravel接口确保支持分页参数
   你的Laravel API需要正确处理page参数，返回对应页码的分页数据，示例代码：

public function index()
{
    $data = YourModel::paginate(10); // 每页10条，自动处理page参数
    return response()->json($data);
}

这样修改后，当你完成更新操作返回列表时，会自动请求之前的页码数据，不会回到第一页。

内容的提问来源于stack exchange，提问作者otmane zghella