先说一下场景-微信公众号网页开发中,一个文章列表点击跳转详情页.代码如下
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. Nancy in .NET Core学习笔记 - 路由

    前文中,我介绍了Nancy的来源和优点,并创建了一个简单的Nancy应用,在网页中输出了一个"Hello World",本篇我来总结一下Nancy中的路由 Nancy中的路由的定义 ...

  2. Java基础12:深入理解Class类和Object类

    更多内容请关注微信公众号[Java技术江湖] 这是一位阿里 Java 工程师的技术小站,作者黄小斜,专注 Java 相关技术:SSM.SpringBoot.MySQL.分布式.中间件.集群.Linux ...

  3. 2018年Fintech金融科技关键词和入行互金从业必懂知识

    2018年过去大半,诸多关键词进入眼帘: 5G,消费降级,数据裸奔,新零售,AI,物联网,云计算,合规监管,风控,割韭菜,区块链,生物识别,国民空闲时间以及金融科技. 这些词充斥着我们的生活和时间,而 ...

  4. centos6.5-vsftp搭建

    我的机子是默认是没有的vsftp. yum install -y vsftp 创建账户专为ftp而生.useradd ftp01 更改账户不可登录系统.usermod -s /sbin/nologin ...

  5. 【SpringCloud】HystrixCommand的threadPoolKey默认值及线程池初始化

    关于threadPoolKey默认值的疑问 使用SpingCloud必然会用到Hystrix做熔断降级,也必然会用到@HystrixCommand注解,@HystrixCommand注解可以配置的除了 ...

  6. linux rsync 实际应用

    linux rsync 实际应用 一.rsync的概述 rsync是类unix系统下的数据镜像备份工具,从软件的命名上就可以看出来了——remote sync.rsync是Linux系统下的文件同步和 ...

  7. Servlet主要相关类核心类 容器调用的过程浅析 servlet解读 怎么调用 Servlet是什么 工作机制

      WEB简介   Web项目 是 B/S结构 浏览器/服务器模式的 浏览器发起请求,服务器作出响应   请求的发起和响应使用HTTP协议进行通讯 所谓协议也就是一种固定格式   而Socket是应用 ...

  8. .NetCore部署至IIS

    部署教程 操作系统要求 Windows 7 或更高版本 Windows Server 2008 R2 或更高版本 依赖的组件 Runtime & Hosting Bundle 可以选择.NET ...

  9. 服务器SSH连接时间设置

    用SSH客户端连接linux服务器时,经常会出现与服务器会话连接中断现象,造成这个问题的原因便是SSH服务有自己独特的会话连接机制. 解决方案: 1.设置服务器向SSH客户端连接会话发送频率和时间 v ...

  10. .net core mvc 区域路由设置(配置)

    写博客原因:添加了区域(用作后台)后,报错: An unhandled exception occurred while processing the request.AmbiguousActionE ...