Vue开发遇坑记--路由传参整个对象

1,014 阅读1分钟

路由传参整个对象

query传参对象

❓ 刷新后还是丢失

✅ JSON包一下 传递JSON字符串,获取的时候再parse (为啥要JSON包一下?直接传个对象不管是query还是params都会丢失)

image.png

parmas传参对象

image.png

image.png

❓ 已经做了持久化 存入本地了 但是存入本地后再取出 为什么一刷新就报错

💬 问题在于:data中上面不存在的时候已经JSON.parse处理了。导致刷新报错

✅ 定义的时候做个判断 SingleUesrInfo: this.$route.params.SingleUesrInfo ? JSON.parse(this.$route.params.SingleUesrInfo) : "" 而非直接parse

多层深跳转的传参逻辑

🌰 A为用户列表页,B用户详情,C用户互动结果 ,A进B进C C页面需要a的用户id和 b上的所有任务数据

❓ 那么如何把A页面上我点击的那个用户信息 传到B,再把B上的详情数据+A上的用户数据 传给C呢?

image.png

✅ 推荐思路:B中的详情建议还是放在 vuex 里面

A只给B传递用户id,点击哪个用户的就往vuex里存哪个用户的对应任务数据
B跳转C的时候也只传id,C页面拿到id先本地存储,然后去c页面把id作为兜底,进入C页面的时候,先判断 vuex 有没有,有的话直接读取,如果没有的话(页面刷新场景)通过 id 重新请求一下数据

image.png

另外2个问题备注下:

  • 如果想传整个对象,那么我路由path后面什么时候改写动态参数?
  • 怎么用解耦的方式传递一整个参数?