Vue JS 3中如何通过Router给组件传递动态Prop

实现步骤 #

1. 修改router.ts路由配置
   你当前配置的props: { object: {} }是静态固定值，无法接收动态传递的参数，需要改成函数式props，从路由参数中提取对应值：

{
  path: '/document/create',
  name: 'createdocument',
  component: CreateDocument,
  // 从路由params中提取object作为组件props
  props: route => ({ object: route.params.object })
}

2. 确认IconButton内部跳转逻辑
   你当前使用link="createdocument" :params="{ object: folder }"的写法是对的，但要确保IconButton内部触发路由跳转时，使用的是命名路由+params的写法，不能用path跳转（path跳转时params会自动失效），内部跳转逻辑参考：

// IconButton 内部示例代码
this.$router.push({
  name: this.link,
  params: this.params
})

3. CreateDocument组件接收props并初始化表单
   直接在组件内声明props即可拿到传递的folder对象，示例（以Vue3 setup语法为例）：

<script setup>
const props = defineProps({
  object: {
    type: Object,
    default: () => ({})
  }
})

// 初始化表单
const form = reactive({
  parentFolderId: props.object.id,
  parentFolderName: props.object.name
  // 其余表单字段按需从props.object取值
})
</script>

补充注意 #

通过路由params传递非路径参数的对象时，刷新页面后参数会丢失。如果需要刷新后仍保留数据，推荐两种方案：

• 将folder的唯一标识id放到路由路径中，例如将path改为/document/create/:folderId?，跳转时只传folderId，进入CreateDocument组件后再根据id请求完整的folder数据
• 使用Pinia/Vuex等全局状态管理工具存储临时传递的folder数据

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