Vue 3 Router Link传递Props报错：缺失必填prop 'aircraft'如何解决？

问题根源 #

1. 路由配置里的props: true仅会把路由路径中定义的params（也就是:id对应的参数）映射为组件props，你在router-link的params里传入的aircraft对象不会被路由处理，而且直接通过路由params传递对象会因为序列化问题丢失数据，导致目标组件拿不到aircraft。
2. 直接用path拼接跳转的方式不够可靠，建议改用命名路由。

解决方案 #

方案1：命名路由+props函数传递（推荐，避免对象序列化问题）

通过路由的props函数，根据路由参数从数据源里获取完整的aircraft对象：

1. 修改路由配置，添加命名路由并配置props函数：

// routes.js
const routes = [
  {
    path: 'aircraftsForm/:id',
    name: 'aircraftsForm', // 添加命名路由
    component: () => import('../components/AircraftComponent.vue'),
    props: (route) => {
      // 这里假设你能全局获取details数据（比如通过Pinia/Vuex，或者父组件传递的全局变量）
      const targetAircraft = details.value.find(item => item.id === Number(route.params.id))
      return { aircraft: targetAircraft }
    }
  }
]

2. 调整router-link的跳转写法，用命名路由传递id参数：

<!-- First Child component中的router-link -->
<router-link 
  :to="{ 
    name: 'aircraftsForm',
    params: { id: props.row.id }
  }"
>
  <q-btn label="查看详情" /> <!-- 添加可点击内容 -->
</router-link>

方案2：通过query序列化传递对象

如果无法全局获取数据源，可以把aircraft对象序列化为JSON字符串通过query传递，再在目标组件中解析：

1. 修改router-link跳转逻辑：

<!-- First Child component中的router-link -->
<router-link 
  :to="{ 
    name: 'aircraftsForm',
    params: { id: props.row.id },
    query: { aircraft: JSON.stringify(props.row) }
  }"
>
  <q-btn label="查看详情" />
</router-link>

2. 更新路由配置，从query中解析对象：

// routes.js
const routes = [
  {
    path: 'aircraftsForm/:id',
    name: 'aircraftsForm',
    component: () => import('../components/AircraftComponent.vue'),
    props: (route) => ({
      aircraft: JSON.parse(route.query.aircraft)
    })
  }
]

额外注意事项 #

• 确保First Child组件中q-table的rows绑定的是props.details（你当前代码里rows未定义，需要补充）：

<!-- First Child component的q-table -->
<q-table
  :rows="props.details" <!-- 绑定正确的数据源 -->
  :columns="columns"
  row-key="id"
  flat bordered
>
<!-- 其余内容不变 -->
</q-table>

• router-link标签内部必须包含可点击的元素（比如按钮、文本），否则无法触发跳转。

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