使用Vue Router+Laravel开发CRUD SPA时获取单条数据提示缺少id参数错误

问题情况 #

在基于Laravel的Vue Router单页应用中，列表页（Index组件）通过router-link传递post.id到Show组件，但调用getPost方法获取单条数据时，出现**Error: Missing required param "id"**错误，尽管参数已经传递。

相关代码 #

Index组件（列表展示） #

<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 Router配置 #

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'),
    },
];

Show组件获取数据方法 #

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

排查与解决步骤 #

1. 确认路由参数是否存在 #

在Show组件的created钩子中先打印路由参数，验证id是否正确传递：

created() {
    console.log('当前路由参数:', this.$route.params);
    this.getPost();
}

如果打印结果中没有id，检查Index组件中router-link的v-if判断是否生效，确认posts列表是否在组件挂载时已完成加载。

2. 监听路由参数变化（组件复用场景） #

如果Show组件被复用（比如从一个文章详情跳转到另一个文章详情），Vue不会重新创建组件，created钩子不会触发，此时需要监听$route变化：

watch: {
    '$route': {
        immediate: true,
        handler() {
            this.getPost();
        }
    }
}

同时移除created中的getPost调用，避免重复执行。

3. 处理模板中post为null的渲染问题 #

Show组件中data定义了post: null，直接渲染{{this.post.description}}会触发额外报错，需添加判断：

<!-- 方式1：使用v-if控制渲染时机 -->
<div v-if="post">{{post.description}}</div>

<!-- 方式2：使用可选链操作符（Vue 2需安装@vue/composition-api或升级Vue 3） -->
{{post?.description}}

4. 验证后端API路径 #

确认Laravel后端的API路由是否与前端请求路径匹配，比如是否定义了：

Route::get('/api/post/{id}', [PostController::class, 'show']);

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