Vue动态传递Props至router-link问题：ID传递显示undefined求助

一、先检查路由配置是否开启props传递 #

确保对应路由已配置props: true，让路由参数能自动转为组件props：

const routes = [
  // 其他路由...
  {
    path: '/updateList/:id',
    name: 'UpdateList',
    component: UpdateListComponent,
    props: true // 关键配置：开启路由参数转props
  }
]

二、确认下拉菜单组件的ID绑定逻辑 #

如果下拉菜单是子组件，要保证父组件正确传值，且子组件动态拼接路由：

父组件调用示例 #

<DropdownMenu :item-id="listItem.id" />

子组件DropdownMenu代码 #

<template>
  <div class="dropdown">
    <!-- 两种正确的动态路由写法 -->
    <router-link :to="`/updateList/${itemId}`">更新</router-link>
    <router-link :to="{ name: 'UpdateList', params: { id: itemId } }">删除</router-link>
  </div>
</template>

<script>
export default {
  props: {
    itemId: {
      type: [String, Number],
      required: true // 强制要求传入ID，避免undefined
    }
  }
}
</script>

⚠️ 注意：to属性必须加冒号:to做动态绑定，不能直接写静态字符串。

三、排查数据加载时机问题 #

如果列表数据是异步获取的，组件渲染时ID可能还未加载完成，导致路由拼接成undefined。可以加v-if做兜底：

<DropdownMenu v-if="listItem.id" :item-id="listItem.id" />

或者在router-link里做判断：

<router-link :to="itemId ? `/updateList/${itemId}` : '#'">更新</router-link>

四、验证ID是否真实存在 #

在子组件里打印传入的ID，确认值是否正确：

<script>
export default {
  props: ['itemId'],
  mounted() {
    console.log('传入的ID:', this.itemId) // 若打印undefined，说明父组件未传对值
  }
}
</script>

如果这里输出undefined，回去检查父组件的列表数据是否正确获取，比如接口返回的字段名是否和你使用的id一致。

内容的提问来源于stack exchange，提问作者MAHEEDHAR A