先说一下场景-微信公众号网页开发中,一个文章列表点击跳转详情页.代码如下
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. 自定义微信小程序导航(兼容各种手机)

    详细代码请见github,请点击地址,其中有原生小程序的实现,也有wepy版本的实现 了解小程序默认导航 如上图所示,微信导航分为两部分,第一个部分为statusBarHeight,刘海屏手机(iPh ...

  2. ActiveMQ的断线重连机制

    断线重连机制是ActiveMQ的高可用性具体体现之一.ActiveMQ提供failover机制去实现断线重连的高可用性,可以使得连接断开之后,不断的重试连接到一个或多个brokerURL. 默认情况下 ...

  3. leetcode — gas-station

    /** * Source : https://oj.leetcode.com/problems/gas-station/ * * There are N gas stations along a ci ...

  4. Alibaba Cluster Data 开放下载:270GB 数据揭秘你不知道的阿里巴巴数据中心

    打开一篇篇 IT 技术文章,你总能够看到“大规模”.“海量请求”这些字眼.如今,这些功能强大的互联网应用,都运行在大规模数据中心上,然而,对于大规模数据中心,你又了解多少呢?实际上,除了阅读一些科技文 ...

  5. mysql数据库备份并且实现远程复制

    一.实现ssh 远程登陆 机器环境: 192.167.33.108 clent 用户:crawler 192.167.33.77 server 用户:crawler 1.客户端 生成密钥 /home/ ...

  6. 如何热更新线上的Java服务器代码

    一.前言 1.热更新代码的场景 (1)当线上服务器出现问题时,有些时候现有的手段不足以发现问题所在,可能需要追加打印日志或者增加一些调试代码,如果我们去改代码重新部署,会破坏问题现场,可以通过热部署的 ...

  7. Smobiler 4.4已正式发布!(Smobiler能让你在Visual Studio上开发APP)

    Smobiler 4.4已经正式发布,还不快来看看?原文地址:https://www.smobiler.com/portal.php?mod=view&aid=53这次更新要感谢我们的用户,在 ...

  8. [PHP] 控制反转依赖注入的日常使用

    控制反转:控制权交给了自己的类 依赖注入:依赖另一个类,我没有手动去new它 <?php /*我自己要用的类*/ class User { private $name; private $age ...

  9. 程序员50题(JS版本)(三)

    程序11:判断101~200之间有多少个素数,并输出所有素数 for(var i=101,num=0;i<=200;i++){ for(var j=2;j<=i;j++){ if(i%j= ...

  10. vue 音乐App QQ音乐搜索列表最新接口跨域设置

    在 webpack.dev.config.js中 'use strict' const utils = require('./utils') const webpack = require('webp ...