如何通过Vue Router传递对象作为props并保留原有参数？

嘿，我来帮你搞定这个Vue路由传参的问题！

首先得搞清楚你为啥之前的尝试没成功：你在初始化路由的时候给CreateComponent设置了静态props对象（{ user: userData }），这种静态配置是固定死的，之后通过$router.push传递的props或者params根本不会和它合并，直接被忽略了，这就是为啥otherProp一直传不进去。

正确的解决方案：用路由props的函数模式 #

我们把路由配置里的props改成函数形式，这样就能动态合并初始的user和导航时传递的新props了，具体改法如下：

self.$router.addRoutes([
  { 
    path: '/create', 
    name: 'create', 
    component: CreateComponent,
    // 改成函数式props，自动合并初始user和导航时的props
    props: (route) => ({
      user: userData, // 保留一开始的user数据
      ...route.props // 合并导航时传递的其他props
    })
  },
  { path: '/list', name: 'list', component: ListComponent },
  { path: '*', redirect: '/list'}
]);

之后再跳转的时候，直接用props传递otherProp就可以了：

self.$router.push({
  name: 'create',
  props: { otherProp: {"a":"b"} }
})

这样一来，CreateComponent就能同时拿到user和otherProp两个参数啦！

为啥之前的方法不行？ #

• 第一种尝试（push时传props）：因为路由配置的是静态props对象，Vue Router不会把导航时的props和它合并，直接忽略了新传递的内容。
• 第二种尝试（push时传params）：params是对应路由路径里的动态参数（比如/create/:id这种），和组件props不是一回事，除非你设置props: true让params映射成props，但那样也没法和初始的user合并。

针对你说的编辑场景补充 #

你提到在列表页点击编辑按钮，要用目标对象填充表单，这个方案完全适配。点击编辑时，把目标对象作为otherProp传递给create路由，函数式的props会自动把初始user和这个编辑对象合并传递给组件，表单就能正常拿到数据啦～

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