先说一下场景-微信公众号网页开发中,一个文章列表点击跳转详情页.代码如下
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. C# - 2017微软校园招聘笔试题 之 MS Recognition[待解决]

    MS Recognition 在线提交: hihoCoder 1402 http://hihocoder.com/problemset/problem/1402 类似: OpenJudge - I:P ...

  2. 【朝花夕拾】Handler篇

    如果您的app中没有使用过Handler,那您一定是写了个假app:如果您笔试题中没有遇到Handler相关的题目,那您可能做了份假笔试题:如果您面试中没被技术官问到Handler的问题,那您也许碰到 ...

  3. 文本主题模型之潜在语义索引(LSI)

    在文本挖掘中,主题模型是比较特殊的一块,它的思想不同于我们常用的机器学习算法,因此这里我们需要专门来总结文本主题模型的算法.本文关注于潜在语义索引算法(LSI)的原理. 1. 文本主题模型的问题特点 ...

  4. C#2.0之可空类型

    可空类型Nullable<T> 在C#2.0之前 ,值类型一直不可以为null,但是实际开发中常常会有这样的需求,比如结束时间. 为什么不可以为null 对于引用类型来说,null代表着空 ...

  5. 记一次查询超时的解决方案The timeout period elapsed......

    问题描述 在数据库中执行查询语句,大约1秒钟查询出来,在C#中用ado进行连接查询,一直等待很久未查出结果,最后抛出查询超时异常. 异常内容如下: Execution Timeout Expired. ...

  6. mtools-你可能没用过的mongodb神器

    前言 接触 mongodb 已经有一段时间了,从一开始的不了解,到现在已慢慢适应这个nosql领域的佼佼者,还是经历了不少波折. 在进行数据库选型的时候,许多人总是喜欢拿 mongodb和mysql. ...

  7. 线程组ThreadGroup分析详解 多线程中篇(三)

    线程组,顾名思义,就是线程的组,逻辑类似项目组,用于管理项目成员,线程组就是用来管理线程. 每个线程都会有一个线程组,如果没有设置将会有些默认的初始化设置 而在java中线程组则是使用类ThreadG ...

  8. Java并发专题(二)线程安全

    前言 随着时代的发展,CPU核数的增加和计算速度的提升,串行化的任务执行显然是对资源的极大浪费,掌握多线程是每个程序员必须掌握的技巧.但是同时多线程也是一把双刃剑,带来了共享资源安全的隐患.在本节会介 ...

  9. Aspose.Word邮件合并之自定义数据源

    Aspose.Word在进行邮件合并时,默认的几个重载方法对Database支持比较友好,但是也可以通过自定义数据源来实现从集合或者对象中返回数据进行邮件合并. 自定义数据源主要是通过实现IMailM ...

  10. 解决ASP.NET MVC 接受Request Payload参数问题

    今天与跟前端小伙伴对接口,发现微信小程序的POST带参数传值HttpContent.Request[]接收不到参数. 拿小程序官网文档举例 wx.request({ url: 'Text/Text', ...