Element-UI分页集成Inertia.js(Laravel)跳转功能求助

前端Vue组件调整 #

首先完善el-pagination的属性绑定和分页切换事件处理：

1. 绑定current-page属性，确保当前页码正确显示
2. 实现current-change事件的处理函数，通过Inertia发起分页请求

<el-pagination
  v-if="items.last_page > 1"
  background
  layout="total, prev, pager, next"
  :total="items.total"
  :page-size="items.per_page"
  :current-page="items.current_page"
  @current-change="handleCurrentChange"
/>

处理函数实现（Options API） #

在组件的methods中添加分页切换方法：

methods: {
  handleCurrentChange(page) {
    // 调用Inertia的visit方法，传递page查询参数
    this.$inertia.visit(window.location.pathname, {
      query: { page },
      // 可选：不需要保留页面其他状态时设置为false
      preserveState: false
    });
  }
}

处理函数实现（Composition API） #

如果使用Vue 3的Composition API：

import { usePage } from '@inertiajs/vue3';

const page = usePage();

const handleCurrentChange = (pageNum) => {
  page.visit(window.location.pathname, {
    query: { page: pageNum }
  });
};

后端Laravel控制器调整 #

Laravel的paginate方法会自动读取请求中的page参数，只需确保控制器接收请求实例即可（默认也能识别，显式声明更清晰）：

use Illuminate\Http\Request;

public function index(Request $request)
{
    // paginate自动根据request的page参数返回对应页数据
    // 可指定每页条数，默认15，也可读取request的per_page参数
    $items = Item::latest()->paginate(
        perPage: $request->per_page ?? 15,
        page: $request->page ?? 1
    );

    return Inertia::render('Item/Index', ['items' => $items]);
}

逻辑说明 #

1. 用户点击分页页码时，触发handleCurrentChange方法
2. Inertia通过AJAX请求当前路由，携带page查询参数
3. Laravel控制器根据page参数查询对应页的数据，返回给前端
4. Inertia更新组件的items数据，分页组件自动同步当前页码，实现无刷新分页跳转

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