vue.js - 错误：缺少必需的参数“id”Vue-router router-link

Question

我将 Laravel 8 与 Vue 3、vue-router、vue-loader 一起使用

在router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import CategoryShow from '../components/category/CategoryShow'
import PostShow from '../components/post/PostShow'

const routes = [
    {
        path: '/categories/:id',
        name: 'categories.show',
        component: CategoryShow,
        props: true
    },
    {
        path: '/posts/:id',
        name: 'posts.show',
        component: PostShow,
        props: true
    },
]

export default createRouter({
    history: createWebHistory(),
    routes
})

在post/PostShow.vue

<router-link v-bind:to="{ name: 'categories.show', params: { id: post.category_id } }">
    {{ post.category_name }}
</router-link>

它显示错误：

[Vue warn]: Unhandled error during execution of setup function 
at <RouterLink to= {name: 'categories.show', params: {…}} > 

Uncaught (in promise) Error: Missing required param "id"

但是当我v-if像这样添加到这个路由器链接标签时：

<router-link v-if="typeof post.category_id !== 'undefined'" 
             v-bind:to="{ name: 'categories.show', params: { id: post.category_id } }">
    {{ post.category_name }}
</router-link>

它神奇地起作用！

谁能解释一下？

标签： vue.jsvue-router