使用vue router和laravel将数据获取到一个数据时出错

Question

我在使用Vue router学习Vue，制作crud SPA应用 显示所有数据的组件：

<template>
    <div>
        <table class="table table-striped">
            <thead>
            <tr>
                <th scope="col">title</th>
                <th scope="col">description</th>
                <th scope="col">author</th>
                <th scope="col">edit</th>
                <th scope="col">delete</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="post in posts">
                <td>
                    <router-link v-if="post && post.id" :to="{ name: 'post.show', params: { id: post.id }}">
                        {{post.title}}
                    </router-link>
                </td>
                <td>{{post.description}}</td>
                <td>{{post.author}}</td>
                <td>
                    <router-link class="btn btn-primary" v-if="post && post.id" :to="{ name: 'post.edit', params: { id: post.id }}">Edit</router-link>
                </td>
                <td>
                    <a class="btn btn-danger" @click.prevent="deletePost(post.id)" href="#">Delete</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

我的 vue 路由器链接

const routes = [
    {
        path: "/post",
        name: "post.index",
        component: () => import('./components/post/Index.vue'),
    },
    {
        path: "/post/:id/edit",
        name: "post.edit",
        component: () => import('./components/post/Edit.vue'),
    },
    {
        path: "/post/:id",
        name: "post.show",
        component: () => import('./components/post/Show.vue'),
    },
];`


method to get data about one data:

`        getPost() {
            axios.get(`/api/post/${this.$route.params.id}`)
                .then(response => {
                    this.post = response.data.data
                })
                .catch(error => {
                    console.log(error.message)
                })
        },

为了显示数据，我使用 {{this.post.description}} 并在 data() { return { post:null }}

如果我尝试获取有关一项数据的数据，则会收到错误“错误：缺少必需的参数“id””，但是

<router-link v-if="post && post.id" :to="{ name: 'post.show', params: { id: post.id}}">                      {{post.title}}</router-link>

我发送有关 id 的数据

我尝试获取有关一个数据的数据

Answer 1

解决这个问题，我使用资源从后端发送到前端数据，并在控制器中使用这个url，返回 ['id' => $id, 'data' => $data] 并工作，当 'id' 进入请求时