Laravel+Inertia.js分页点击后页面内容无变化问题求助

1. 后端路由与数据返回检查 #

• 确保web.php中路由正确接收分页参数，且返回的分页数据兼容Inertia：
  • 必须调用appends(request()->query())，否则分页链接会丢失当前查询参数（如搜索条件），导致页码切换时参数失效：

    // web.php 示例
    Route::get('/posts', function () {
        $posts = Post::paginate(10)->appends(request()->query());
        return Inertia::render('Posts', ['posts' => $posts]);
    });
    

  • 验证后端是否收到page参数：在路由中临时添加dd(request()->get('page'))，确认点击分页时能正确获取页码值。

2. 前端组件（Posts.vue）分页链接处理 #

• 必须使用Inertia的Link组件触发分页跳转，不能用原生<a>标签，否则无法触发AJAX请求更新数据：

  <!-- Posts.vue 分页部分示例 -->
  <template>
    <div class="pagination">
      <Link
        v-for="link in posts.links"
        :key="link.url"
        :href="link.url"
        :class="{ 'active': link.active }"
      >
        {{ link.label }}
      </Link>
    </div>
  </template>
  
  <script setup>
  import { Link } from '@inertiajs/vue3';
  defineProps({
    posts: Object,
  });
  </script>
  

• 确认前端接收的posts数据包含links、current_page等Laravel分页实例自动生成的字段。

3. Docker环境缓存清理 #

Docker环境易出现路由、配置缓存导致的参数不生效，执行以下命令清理：

php artisan route:clear
php artisan config:clear
php artisan view:clear

若启用OPcache，需重启PHP容器或刷新OPcache，避免旧逻辑被缓存。

4. Nginx配置检查 #

确保Nginx正确传递查询参数，try_files指令需保留?$query_string，否则page参数会丢失：

location / {
    try_files $uri $uri/ /index.php?$query_string;
}

5. 前端依赖版本兼容性 #

检查package.json中Inertia相关依赖版本，确保与Laravel 9、Jetstream兼容，推荐组合：

{
  "@inertiajs/inertia": "^0.11.0",
  "@inertiajs/inertia-vue3": "^0.6.0",
  "@inertiajs/progress": "^0.2.7",
  "vue": "^3.2.31"
}

执行npm install重新安装依赖，修复版本不匹配导致的解析问题。

6. 排查模型查询逻辑 #

检查Post模型的查询是否存在硬编码的limit或take方法，这类代码会覆盖Laravel的分页逻辑，导致始终返回第一页数据。

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