Laravel10+InertiaJS+Vue3资源路由下Listings的Edit/Destroy报404

基于Laravel 10、InertiaJS和Vue3启动新项目，创建了Blog（对应stories路由）和Listings两个模型。Blog模块所有CRUD路由正常工作，但Listings仅index、create、store路由可用，edit和destroy操作触发404错误，DebugBar提示：

No query results for model [App\Models\Listing] 1

相关代码片段 #

web.php

...
Route::resource('stories',StoryController::class); // Blog模块路由
Route::resource('listings',ListingController::class);
...

ListingsController.php

...
public function edit(Listing $listing)
{
    return Inertia::render(
        'Listings/Edit',
        [
            'listing' => $listing
        ]
    );
}
...
public function destroy(Listing $listing)
{
    $listing->delete();
    sleep(1);

    return redirect()->route('listings.index')->with('message', 'Listing Delete Successfully');
}

Listings/Index.vue

<script setup>
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import PrimaryButton from "@/Components/PrimaryButton.vue";
import { Head, Link, useForm } from "@inertiajs/vue3";

const props = defineProps({
    listings: {
        type: Object,
        default: () => ({}),
    },
});
const form = useForm({});

function destroy(id) {
    if (confirm("Are you sure you want to Delete")) {
        form.delete(route("listings.destroy", id));
    }
}
</script>

<template>
    <Head title="Listings" />

    <AuthenticatedLayout>
        <template #header>
            <h2 class="text-xl font-semibold leading-tight text-gray-800">
                Listings Index
            </h2>
        </template>

        <div class="py-12">
            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
                <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
                    <div class="p-6 bg-white border-b border-gray-200">
                        <div class="mb-2">
                            <Link :href="route('listings.create')">
                                <PrimaryButton>Add Listing</PrimaryButton>
                            </Link>
                        </div>
                        <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
                            <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                                <thead
                                    class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                                <tr>
                                    <th scope="col" class="px-6 py-3">#</th>
                                    <th scope="col" class="px-6 py-3">
                                        Author
                                    </th>
                                    <th scope="col" class="px-6 py-3">
                                        Title
                                    </th>
                                    <th scope="col" class="px-6 py-3">
                                        Edit
                                    </th>
                                    <th scope="col" class="px-6 py-3">
                                        Delete
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="listing in listings" :key="listing.id"
                                    class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                                    <th scope="row"
                                        class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
                                        {{ listing.id }}
                                    </th>
                                    <th scope="row"
                                        class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
                                        {{ listing.user.first_name }} {{ listing.user.last_name }}
                                    </th>
                                    <th scope="row"
                                        class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
                                        {{ listing.title }}
                                    </th>
                                    <td class="px-6 py-4">
                                        <Link :href="route('listings.edit', listing.id)" 
                                              class="px-4 py-2 text-white bg-blue-600 rounded-lg">Edit</Link>
                                    </td>
                                    <td class="px-6 py-4">
                                        <PrimaryButton class="bg-red-700" @click="destroy(listing.id)">
                                            Delete
                                        </PrimaryButton>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>

根据错误提示和代码分析，问题核心在于路由模型绑定的匹配逻辑，以下是具体排查和修复步骤：

• 检查模型主键配置：Laravel路由模型绑定默认用id作为主键查询，如果Listing模型使用了自定义主键（如uuid），需在模型中显式声明：

  // App/Models/Listing.php
  protected $primaryKey = 'your_custom_key';
  public $incrementing = false; // 若主键非自增整数，需添加此行
  

• 确认路由与控制器参数名称一致：执行php artisan route:list查看路由列表，确保edit和destroy路由的参数为{listing}，与控制器方法的Listing $listing参数名称匹配。

• 排查软删除或全局作用域影响：如果Listing模型使用了SoftDeletes trait，且目标记录已被软删除，路由模型绑定默认不会查询已软删除的记录。可修改控制器方法允许查询软删除数据：

  public function edit($id)
  {
      $listing = Listing::withTrashed()->findOrFail($id);
      return Inertia::render('Listings/Edit', ['listing' => $listing]);
  }
  

• 修正Vue组件props类型：当前listings的props类型定义为Object，但实际是需要遍历的数组，修正为：

  const props = defineProps({
      listings: {
          type: Array,
          default: () => [],
      },
  });
  

• 验证传递的ID有效性：在Vue组件中添加调试日志，确认传递的listing.id是数据库中存在的有效ID：

  function destroy(id) {
      console.log('待删除ID:', id);
      if (confirm("Are you sure you want to Delete")) {
          form.delete(route("listings.destroy", id));
      }
  }
  

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