先说一下场景-微信公众号网页开发中,一个文章列表点击跳转详情页.代码如下
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. python操作符笔记

    1.**两个乘号就是乘方,比如2**4,结果就是2的4次方,结果是16 2.//就是做浮点除法,并舍弃小数部分(注意不是四舍五入) 3.@是python中的修饰符,具体功能我没弄懂.

  2. Scrum到底是个神马玩意儿

    从前有一种非常火爆的体育运动,对阵双方各派出11位猛男,在宽阔的草皮球场内争抢一颗可怜的小皮球.哪方能够通过团队协作拿到皮球,并且运送到对方场地的特定位置即得分. 没错,你没有走错片场,快到超级碗里来 ...

  3. Spring Cloud Eureka基本概述

    记一次Eureka的进一步学习. 一.Eureka简介 百科描述:Eureka是Netflix开发的服务发现框架,本身是一个基于REST的服务,主要用于定位运行在AWS域中的中间层服务,以达到负载均衡 ...

  4. MySQL执行原理,逻辑分层、更改数据库处理引擎

    MySQL执行原理,逻辑分层.更改数据库处理引擎 作者:Stanley 罗昊 [转载请注明出处和署名,谢谢!] 用了那么长时间的MySQL,sql语句相信早已烂熟于心,于是,我就试着去了解它的执行原理 ...

  5. Linux内核使用浮点运算问题

    上一篇博文中 电池温度检测原理和示例代码 ,由于驱动要使用对数函数而从网上参看一个实现 double ln(double a) { ; int k,nk; double x,xx,y; x = (a- ...

  6. what a fuck!这是什么鬼东西?

    Topic Link http://ctf5.shiyanbar.com/DUTCTF/1.html 1) 打开链接发现一片看不懂的东西,还真是WTF? 2)分析发现是Jother编码 将其放到浏览器 ...

  7. Array的 filter() 和 sort()

    filter() filter() 方法创建一个创建一个新数组,新数组中的元素是通过筛选原数组中的元素所得到的.筛选的方式是把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保 ...

  8. OPC协议解析-OPC UA OPC统一架构

    1    什么是OPC UA 为了应对标准化和跨平台的趋势,为了更好的推广OPC,OPC基金会近些年在之前OPC成功应用的基础上推出了一个新的OPC标准-OPC UA.OPC UA接口协议包含了之前的 ...

  9. Neutron server的运行原理(未完待续)

    1.Neutron server首先是一个web server, 对于http和https协议的报文进行响应. 2.Neutron server进程里面包含了一个WSGI 应用程序,以及不同模块的pl ...

  10. bootstrap-treeview 在 bootstrap 4 不兼容解决办法及使用

    bootstrap-treeview 是bootstrap的一个树形插件,插件依赖: bootstrap/3.3.7 jquery/3.3.1 经过验证,它不可以在 bootstrap 高于 3.3. ...