vue-router 如何优雅传参嵌套的对象？

Question

在传递嵌套的对象时，拿到的是字符串 '[object Object]', 而不是原始的对象.

router.push({ name: 'somewhere', params: { oops: { a: { b: { c: 'gets removed'} } } })

console.log(route.params.oops); // '[object Object]'

除了使用 oops: (JSON.stringify(oops)) 还有更合适的方案传参吗？

Answer 1

你这个是跨组件通讯，而不是单纯的路由参数。需要使用 vuex 或者 pinia 来实现。当然也可以通过 localStorage 来简单实现。
当然你如果你非要做也可以，但你在路由上面来处理一点也不优雅，也不合适。

var a = { 
  b: {
    c : {
      d: 1
    }
  } 
}
const params = btoa(JSON.stringify(a))
console.log('params', params)
// "eyJiIjp7ImMiOnsiZCI6MX19fQ==" 

Answer 2

可以参考Zova的实现，不仅可以支持JSON对象，也支持Array数组，代码简洁、优雅:

1. 支持json对象

可以在 Query 中传递 json 对象。比如，我们在 Query 中定义一个 user 对象

export const QuerySchema = zz.object({
  user: zz
    .json({
      name: zz.string(),
      age: zz.number(),
    })
    .optional(),
});

在 render 中可以直接读取 user 对象的值

export class RenderCardHeader {
  render() {
    return (
      <div>
        <div>name: {this.$query.user?.name}</div>
        <div>age: {this.$query.user?.age}</div>
      </div>
    );
  }
}

2. 支持array数组

可以在 Query 中传递 array 数组。比如，我们在 Query 中定义一个 colors 数组

export const QuerySchema = zz.object({
  colors: zz.array(zz.string()).optional(),
});

在 render 中可以直接读取 colors 数组的值

export class RenderCardHeader {
  render() {
    return (
      <div>
        <div>colors: {this.$query.colors?.join(',')}</div>
        <div>length: {this.$query.colors?.length}</div>
      </div>
    );
  }
}

• 参见: Zova: zod