错误：缺少所需的参数"id" Vue 路由器路由器链路

Question

我正在使用Laravel 8与Vue 3、Vue路由器、Vue加载器

在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>

它神奇地工作！

有人能解释一下吗？

Answer 1

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

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

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

Answer 2

• 我也面临这个问题。

  然后我就解决了这个问题。

  在这里检查你的Api或数据库

  这个id是你是否有数据库

"；电影"：[{"id"：1，这个id是你是否有数据库"；标题"："狮子王"；，"年份"："2019"；，"运行时"："118分钟"；，}，]，然后使用该

｛｛post.category_name｝｝它的工作