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

Question

我正在使用 Laravel 8 和 Vue 3、vue-router、vue-loader

\n

在router/index.js

\n

import { createRouter, createWebHistory } from 'vue-router'\nimport CategoryShow from '../components/category/CategoryShow'\nimport PostShow from '../components/post/PostShow'\n\nconst routes = [\n    {\n        path: '/categories/:id',\n        name: 'categories.show',\n        component: CategoryShow,\n        props: true\n    },\n    {\n        path: '/posts/:id',\n        name: 'posts.show',\n        component: PostShow,\n        props: true\n    },\n]\n\nexport default createRouter({\n    history: createWebHistory(),\n    routes\n})\n

\n

在post/PostShow.vue

\n

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

\n

它显示错误：

\n

[Vue warn]: Unhandled error during execution of setup function \nat <RouterLink to= {name: 'categories.show', params: {\xe2\x80\xa6}} > \n\nUncaught (in promise) Error: Missing required param "id"\n

\n

但是当我v-if像这样添加到这个 router-link 标签时：

\n

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

\n

它神奇地起作用了！

\n

谁能解释一下吗？

\n

Answer 1

我敢打赌这是因为变量中加载的数据post来自对服务器端的异步调用。

当页面显示时，post尚未加载，但vue-router已经尝试渲染其router-link，因此会导致错误，尝试使用目前未定义的必需参数。

您可以将您的链接链接router-link到请求参数（我猜id来自完整的url），或者像您一样，仅router-link在帖子加载时显示（这就是效果v-if）。