Laravel10+InertiaJS2中如何正确使用vue-awesome-paginate分页组件？

第一步：后端控制器完善分页逻辑 #

先修改HomeController，接收前端传递的分页参数，用Laravel自带的分页功能处理数据，同时返回分页元数据（总条数、当前页、每页条数等）：

class HomeController extends Controller
{
    public function index(Request $request)
    {
        // 获取前端传的页码，默认第1页
        $page = $request->input('page', 1);
        // 每页展示的产品数量，可按需调整
        $perPage = 12;

        // 查询产品并分页
        $products = Product::query()->paginate($perPage, ['*'], 'page', $page);

        return Inertia::render('Home/Index', [
            // 返回带分页元数据的产品集合
            'products' => ProductResource::collection($products),
        ]);
    }
}

第二步：前端Products组件实现分页交互 #

vue-awesome-paginate只负责分页UI和触发点击事件，实际数据更新需要结合Inertia的无刷新路由来完成：

1. 完善组件逻辑 #

<script>
import { router } from '@inertiajs/vue3';
import { ref } from 'vue';

export default defineComponent({
    props: {
        products: {
            type: Object,
            required: true,
        },
    },
    name: 'frontendProductsList',
    setup(props) {
        // 从后端返回的分页数据中提取参数
        const currentPage = ref(props.products.current_page);
        const totalProductsCount = ref(props.products.total);
        const homeProductsPerPage = ref(props.products.per_page);
        const showPagination = ref(totalProductsCount.value > homeProductsPerPage.value);

        // 分页点击事件处理
        function paginateClick(page) {
            currentPage.value = page;
            // 用Inertia路由发起无刷新请求，传递page参数
            router.visit(route('home.index'), {
                query: { page },
                preserveState: false, // 强制更新页面状态
                preserveScroll: false // 分页后回到页面顶部
            });
        }

        return {
            currentPage,
            totalProductsCount,
            homeProductsPerPage,
            showPagination,
            paginateClick
        };
    }
});
</script>

2. 修正模板参数绑定 #

确保模板里的分页组件参数和响应式变量对应：

<template>
    <div class="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8 d1">
        <template v-for="product in products.data" :key="product.id">
            <ProductItem :product="product"></ProductItem>
        </template>
    </div>

    <div class="p-2 frontend_pagination" v-show="showPagination">
        <vue-awesome-paginate
            :total-items="totalProductsCount"
            :items-per-page="homeProductsPerPage"
            :max-pages-shown="5"
            v-model="currentPage"
            @click="paginateClick"
        />
    </div>
</template>

第三步：根页面传递分页数据 #

确保Home/Index页面正确接收后端数据并传递给Products组件：

<script>
import Products from '@/Pages/Home/Components/Products.vue';
import { defineComponent } from 'vue';

export default defineComponent({
    props: {
        products: {
            type: Object,
            required: true,
        },
    },
    name: 'personalProductsList',
    components: { Products },
});
</script>

关键说明 #

• vue-awesome-paginate仅负责分页UI渲染和页码点击触发，数据更新必须通过Inertia和后端配合实现。
• Laravel的paginate()方法返回的集合自带data（当前页数据）、current_page、total、per_page等元数据，刚好匹配分页组件的参数需求。
• 使用router.visit发起请求，Inertia会自动处理无刷新页面更新，后端接收page参数后返回对应页的产品数据，前端props自动更新。

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