在使用 $router.push() 时,如果使用了query,则可以在跳转后从query中获取到对应的参数。如果传的是字符串自然没问题,但是如果传的其他类型的数据,在跳转之后是正常的,而跳转之后再刷新一遍页面的话,query里面的属性的值都会变成字符串。例如:

  1. this.$router.push({ name:'product', query: {canSee: false} });

  最初跳转之后,this.$route.query.canSee打印的值是Boolean类型的。然后刷新一下,值就变成了String类型了。个人猜测是因为刷新后query的值是直接从页面URL中取的,而在页面URL上的参数的类型只能是字符串类型。

解决方法

  1. 在传值之前把要传的参数单独放到一个对象里,在放到query里面,然后进行JSON.stringify()处理,到了目标页面后再进行JSON.parse()处理,还原对象。这种方法的好处是可以一次性处理多个参数,而且适用度高,建议使用这种方法。

  2. 传值前不做处理,到了目标页面后再单独对原本为非字符串的数据进行JSON.parse()处理。缺点是字符串类型的数据不能如此处理,要确保该数据不是字符串类型的。局限性大,不推荐适用。

相关文章:router路由跳转使用query传递参数刷新后数据无法获取

Vue router的query对象里的值的问题的更多相关文章

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

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

  2. Vue中data返回对象和返回值的区别

    速记:粗浅的理解是,事件的结果是影响单个组件还是多个组件.因为大部分组件是要共享的,但他们的data是私有的,所以每个组件都要return一个新的data对象 返回对象的时候 <!DOCTYPE ...

  3. 微信小程序--修改data数组或对象里面的值

    1.初始data数据 Page({     data:{          code:'1234',         reward:[{             name:"艾伦" ...

  4. vue watch监听对象及对应值的变化

    data:{ a:1, b:{ value:1, type:1, } }, watch:{ a(val, oldVal){//普通的watch监听 console.log("a: " ...

  5. EF修改对象里面的值。。。(对象字段多的时候)

    后台代码 public ActionResult Edit(my m)//my实体类 { testEntities t = new testEntities();//数据库上下文 t.my.Attac ...

  6. vue :class 可以接收 字符串 数组 和 对象 对象里面的key值 根据true或false 显示不显示

    vue :class 可以接收 字符串 数组 和 对象 对象里面的key值 根据true或false 显示不显示 https://cn.vuejs.org/v2/guide/class-and-sty ...

  7. 仵航说 Vue用replace修改数组中对象的键值或者字段名 仵老大

    仵航说 Vue用replace修改数组中对象的键值或者字段名 仵老大 1.介绍 先看图 ​ 今天在项目中遇到了一个问题,例如我现在需要传一些数据到后端,数组例如是 let arr = [ {" ...

  8. vue 监听对象里的特定数据

    vue  监听对象里的特定数据变化 通常是这样写的,只能监听某一个特定数据 watch: { params: function(val) { console.log(val) this.$ajax.g ...

  9. 11.VUE学习之提交表单时拿到input里的值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

随机推荐

  1. swift 笔记 (十一) —— 方法(类,结构体,枚举)

    Methods (方法) 实例方法(Instance Methods) 我认为看到这里.我们唯能八一八的就是swift的自做主张的行为了,反正它就是会以各种方式帮助我们来完毕让代码看起来非常奇怪的事情 ...

  2. PasswordHelper 对user对象的password进行加密重设

    public class PasswordHelper { private RandomNumberGenerator randomNumberGenerator = new SecureRandom ...

  3. 二分法查找 js 算法

    二分法查找算法:采用二分法查找时,数据需是排好序的.主要思想是:(设查找的数组区间为array[s, e])(1)确定该区间的中间位置m(2)将查找的值T与array[m]比较,若相等,查找成功返回此 ...

  4. openSUSE Leap与 SELS的区别

    openSUSE Leap 是 openSUSE 常规发行版本的新名称,在 13.2 之前它仅仅被称为“openSUSE”. 一.openSUSE 发行周期:(15年以前仅有一个openSUSE发行版 ...

  5. 解决电信或网通的DNS劫持

    大家有没有碰到访问一些不存在域名或者网站时,浏览器本应显示一个网址不存在之类的信息,但是因为现在很多ISP做了DNS劫持将不存在的域名或网址重定向到ISP的广告页面,烦人的狠.其实tomato可以解决 ...

  6. CentOS7 PXE安装批量安装操作系统

    1.安装相关软件 yum -y install tftp-server httpd dhcp syslinux 2.配置DHCP cp /usr/share/doc/dhcp-4.2.5/dhcpd. ...

  7. 紫书 习题 10-32 UVa 1414 ( 迷之规律)

    看了其他人博客,貌似i个盘子的方案数满足 f[i] = f[i-1] * x + y ??????? 神来之笔 貌似没有找到严格的证明-- 牛逼-- 如果这样的话暴力求出x和y然后递推完事 #incl ...

  8. CCF模拟题 窗口

    窗口 时间限制: 1.0s 内存限制: 256.0MB   问题描述 在某图形操作系统中,有 N 个窗口,每个窗口都是一个两边与坐标轴分别平行的矩形区域.窗口的边界上的点也属于该窗口.窗口之间有层次的 ...

  9. Saltstack的API接口与调用方式

     saltstack看起来是成为一个大规模自己主动化运维和云计算管理的一个框架,类似于SDK,并非像puppet仅仅成为一个工具.基于良好设计的API和清楚的思路,让salt的二次开发变得非常easy ...

  10. iOS定制改动navigation的backbutton

    iOS开发中.navigation的返回button是英文"back".想改动成中文"返回"或者自己定义的文字.这么简单的事情却折腾了小半个小时.原来是被lef ...