开发者问题收集

使用资源路由的 Laravel 10、Inertia JS 和 Vuejs 的 404 页面

2023-09-14
664
php laravel vue.js inertiajs

我刚刚用 Laravel 10、InertiaJS 和 Vue3 开始了一个新项目。

我设置了两个简单模型， Blog 和 Listings 。由于这是我使用 Inertia 和 Vue 的第一个项目，我根据教程创建了博客（作为参考框架）。 blog 的所有 CRUD 资源路由均正常工作。因此，我生成了所有 listings 资源以镜像 blog 。 listings 唯一有效的路由是 index、create 和 store——我在 edit 和 destroy 路由上收到 404 错误。我没有主意了。

尝试编辑或删除列表时出现调试栏错误 

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

web.php 

...
Route::resource('stories',StoryController::class); (my blog routes)
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>
2个回答

不确定这是否是问题所在，但您使用命名路由进行编辑和删除，而 routes.php 中的资源没有 name() 方法。

尝试将 name 方法添加到路由。或者，您可以尝试在链接中指定完整路由（不使用 route() 函数）。

Bill200
2023-09-14

在 此处 找到答案。

已更改 

:href="route('listings.edit', listing.id)

更改为 

:href="route('listings.edit', listing)

不确定为什么我的 blog 资源在没有这些更改的情况下可以正常工作。

Charles Smith
2023-09-14