Vue Router路由传对象报错，咨询嵌套对象传递方案

1. 解决"invalid param"错误 #

你当前的问题出在路由配置和跳转逻辑不匹配：

• 你的路由path: '/upload'没有定义动态参数段，但你用params传递了mode，Vue Router会判定这是无效参数——因为params默认对应URL路径里的动态占位符（比如:mode）。
• 同时路由里写的props: { mode: 'manual' }是静态props，会固定传递mode: 'manual'，直接覆盖你跳转时传入的参数。

两种可行修正方案： #

方案A：URL带参数（适合需要分享链接的场景）

修改路由配置，把mode设为路径参数：

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    // ...其他路由
    children: [
      {
        path: '/upload/:mode', // 增加动态参数段
        name: 'Upload Review',
        component: () => import('../pages/CertificationUploadPage.vue'),
        props: true // 自动把params转为组件props
      },
    ],
    // ...其他路由
  ]
})

跳转时保持原有写法即可，此时URL会变成/upload/email，目标组件能通过props正常接收mode。

方案B：URL不带参数（适合不想暴露参数的场景）

用路由导航的state传递参数，同时把路由的props改为函数模式，从route中读取state值：

// 路由配置
const router = createRouter({
  // ...其他配置
  routes: [
    // ...其他路由
    children: [
      {
        path: '/upload',
        name: 'Upload Review',
        component: () => import('../pages/CertificationUploadPage.vue'),
        props: (route) => ({ 
          mode: route.state?.mode || 'manual' 
        }) // 优先取state里的mode，默认值为manual
      },
    ],
    // ...其他路由
  ]
})

// 跳转时用state传递参数
router.push({ 
  name: 'Upload Review', 
  state: { mode: 'email' } 
})

这种方式参数不会出现在URL里，但刷新页面后state会丢失，适合一次性跳转传递临时数据。

2. 传递嵌套对象的方案 #

完全可以传递嵌套对象，不需要依赖Pinia：

• 沿用上面的方案B，把嵌套对象放到state里即可：

// 跳转时传递嵌套对象
router.push({ 
  name: 'Upload Review', 
  state: { 
    mode: 'email',
    userData: {
      id: 123,
      basicInfo: {
        name: 'test',
        age: 28
      },
      extra: {
        tags: ['admin', 'verified']
      }
    }
  } 
})

// 路由props配置
props: (route) => ({ 
  pageData: route.state || { mode: 'manual' }
})

// 目标组件接收props
defineProps({
  pageData: {
    type: Object,
    default: () => ({ mode: 'manual' })
  }
})

如果需要参数在页面刷新后依然保留，或者需要在多个页面间共享数据，才需要使用Pinia这类状态管理工具。

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