先说一下场景-微信公众号网页开发中,一个文章列表点击跳转详情页.代码如下
1
2
3
this.$router.push({path: '/wx/detail', query: {res: data}})
// data中的数据结构如下一个对象里边有数组有对象等等。。。
{title:
1
2
3
4
5
6
7
8
// 列表页点击跳转
let data = JSON.stringify(result) // result传递的query参数。我们转为string
this.$router.push({path: '/wx/detail', query: {res: data}})
 
 
// 详情页获取
 let data = JSON.parse(this.$route.query.res)
  this.result = Object.assign({}, data)

  

1
'xxx', imgList: ['1','2'] }

首先第一点击跳转详情页显示正常。如下

那么接下来我们刷新下页面。你会发现你得对象完全变了。成了一个"[object Object]"这是怎么回事呐?怎么解决呐?

 不知道为什么vue-router会这样做?接下来会去研究下源码,或者浏览器的处理机制。先说下解决方案吧。

vue-router query 传对象需要JSON.stringify()转化的更多相关文章

  1. vue router & query params

    vue router & query params vue router get params from url https://zzk.cnblogs.com/my/s/blogpost-p ...

  2. vue $router.push 传参的问题

    $router 和 $route的区别 $route为当前router跳转对象里面可以获取name.path.query.params等 $router为VueRouter实例,想要导航到不同URL, ...

  3. js对象序列化JSON.stringify()与反序列化JSON.parse()

    草稿: parse用于从一个字符串中解析出json对象,如 var str = '{"name":"huangxiaojian","age" ...

  4. js 对象与json的转化

    1.将对象转换为JSON格式字符串 JSON.stringify(object) 2.将JSON字符串转换为对象 JSON.parse(jsonString);

  5. JSON.stringify转化报错

    两种方式会导致该错误:1.json格式数据存在循环调用.   举个例子: var obj = { title: '标题'}obj.content = obj;JSON.stringify(obj); ...

  6. Python之dict(或对象)与json之间转化

    在Python语言中,json数据与dict字典以及对象之间的转化,是必不可少的操作. 在Python中自带json库.通过import json导入. 在json模块有2个方法, loads():将 ...

  7. Vue路由query传参

    1.不要进行过深的嵌套 let id = 'uyu' this.$router.push({ path: '/mrp_detail', query: { re_order_id: id, option ...

  8. Jackson学习二之集合类对象与JSON互相转化--转载

    原文地址:http://lijingshou.iteye.com/blog/2003059 本篇主要演示如何使用Jackson对List, Map和数组与JSON互相转换. package com.j ...

  9. vue router使用query和params传参的使用

    传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,希望可以帮到大家. Vue ...

随机推荐

  1. Django里URL配置中name参数的作用

    先看一下URL配置,新增了如下内容: 修改视图views.py 增加一个页面 现在要求是在name页面里面增加一个链接,显示详细信息.修改name页面 这个功能实现了,可是之前添加的那个name参数是 ...

  2. DocX开源WORD操作组件的学习系列二

    DocX学习系列 DocX开源WORD操作组件的学习系列一 : http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_sharp_001_docx1.htm ...

  3. 第51章 内省端点(Introspection Endpoint) - Identity Server 4 中文文档(v1.0.0)

    内省端点是RFC 7662的实现. 它可用于验证引用令牌(如果消费者不支持适当的JWT或加密库,则可以使用JWT).内省端点需要身份验证 - 因为内省端点的客户端是API,您可以在其上配置秘密ApiR ...

  4. 杭电ACM2006--求奇数的乘积

    求奇数的乘积 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  5. Java学习笔记之——LinkedList

    LinkedList 底层结构:链表 1. API: 除了ArrayList中有的方法以外,LinkedList还有几个扩展方法 void addFirst(E e) 在该列表开头插入指定的元素. v ...

  6. 利用scrollintoview方法模拟聊天室收到新消息

    这段时间再写一个聊天的功能,基本的原理已经通了,剩下的就是细化功能和实现了.原理通了不代表就能解决了这个问题,今天就遇到了一个小问题,就是在接收到新的消息以后,最新的消息不能显示在消息区域,而是跑到了 ...

  7. Dynamics CRM图表高级话题:创建跨实体的图表

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复147或者20150728可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 制作图表你会发现,在界面上只能选 ...

  8. Setup script exited with error: command 'x86_64-linux-gnu-gcc' failed with exit status 1 解决办法

    今天在Ubuntu16.04 上安装python包的时候,出现了这个坑爹的问题: 解决办法,内容总结如下 情况是这样,报错是因为没有把依赖包安装全,报错情况如下图: 解决办法,先安装一些必须的依赖: ...

  9. Hive之SerDe&Beeline

    一.SerDe SerDe:Serializer and Deserializer 序列化及反序列化,构建在数据存储和执行引擎之间,对两者实现解耦. Hive通过ROW FORMAT DELIMITE ...

  10. restful api与传统api的区别(方式及语法)

    示例:一个状态数据操作接口 传统模式: api/getstate.aspx- 获取状态信息api/updatestate.aspx - 更新状态信息api/deletestate.aspx - 删除该 ...