Vue Router动态路由报错：Cannot read properties of undefined (reading 'name')

常见原因及修复步骤 #

1. 路由参数与数据类型不匹配 #

URL里的动态参数是字符串类型，如果你用它和数字类型的ID做匹配，会找不到对应数据，返回undefined后读取name就会报错。

• 修复查找逻辑，把参数转成数字：

  // 组件内获取数据的代码示例
  const destination = destinations.find(item => item.id === Number(this.$route.params.id))
  

• 同时检查你的数据源（比如destinations数组），确认存在id: 1的条目。

2. 路由配置参数名写错 #

检查router/index.js里的动态路由配置，确保参数名和组件中使用的一致：

// 正确的动态路由配置
const routes = [
  // ...其他路由
  {
    path: '/destination/:id', // 这里的:id要和组件里$route.params.id对应
    name: 'DestinationDetail',
    component: DestinationDetail
  }
]

3. 模板未做空值判断 #

组件渲染时可能数据还没加载完成，直接读取属性会报错，给模板加判断：

<!-- 用可选链操作符快速处理 -->
<h1>{{ destination?.name }}</h1>
<!-- 或者用v-if先确认数据存在 -->
<h1 v-if="destination">{{ destination.name }}</h1>

4. 数据源导入或定义错误 #

确认你在组件或路由文件里正确导入了数据源，比如：

import destinations from '../data/destinations'

同时检查数据源数组里的每个对象，确保都包含id和name属性。

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