Vue.js路由组件间传值访问时出现undefined问题求助

1. 补全路由的参数占位符 #

你的edit_user路由未在path中定义参数占位符，导致params里的userId无法被路由识别为合法参数，props: true也就无法将其映射为组件props。修改路由配置：

{
  path: 'edit/:userId', // 添加:userId占位符，与params中的字段对应
  name: 'edit_user',
  component: () => import('../components/CreateUser.vue'),
  props: true,
}

注意：params中传递的非路由占位符字段（比如你写的data）会在页面刷新后丢失，不建议用这种方式传递非URL必要数据，可改用query或状态管理工具（如Pinia）。

2. 修正router-link的参数传递 #

如果仅传递userId，router-link写法如下：

<router-link :to="{
  name: 'edit_user', 
  params: {
    userId: 'some' // 若传递组件内变量，去掉引号，比如userId: user.id
  }
}">

若确实需要传递data，改用query传递：

<router-link :to="{
  name: 'edit_user', 
  params: { userId: 'some' },
  query: { data: 'newUser' } // 传递变量则写data: newUser
}">

此时可在路由中配置props函数模式，将query映射为组件props：

// 路由配置修改为
props: route => ({
  userId: route.params.userId,
  data: route.query.data
})

3. 规范组件props定义 #

确保CreateUser.vue的props定义正确，建议指定类型提升严谨性：

props: {
  userId: String,
  data: String
}

之后即可通过this.userId和this.data正常访问传递的数据。

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