Vue router的query对象里的值的问题
在使用 $router.push() 时,如果使用了query,则可以在跳转后从query中获取到对应的参数。如果传的是字符串自然没问题,但是如果传的其他类型的数据,在跳转之后是正常的,而跳转之后再刷新一遍页面的话,query里面的属性的值都会变成字符串。例如:
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对象里的值的问题的更多相关文章
- vue router使用query和params传参的使用
传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,希望可以帮到大家. Vue ...
- Vue中data返回对象和返回值的区别
速记:粗浅的理解是,事件的结果是影响单个组件还是多个组件.因为大部分组件是要共享的,但他们的data是私有的,所以每个组件都要return一个新的data对象 返回对象的时候 <!DOCTYPE ...
- 微信小程序--修改data数组或对象里面的值
1.初始data数据 Page({ data:{ code:'1234', reward:[{ name:"艾伦" ...
- vue watch监听对象及对应值的变化
data:{ a:1, b:{ value:1, type:1, } }, watch:{ a(val, oldVal){//普通的watch监听 console.log("a: " ...
- EF修改对象里面的值。。。(对象字段多的时候)
后台代码 public ActionResult Edit(my m)//my实体类 { testEntities t = new testEntities();//数据库上下文 t.my.Attac ...
- vue :class 可以接收 字符串 数组 和 对象 对象里面的key值 根据true或false 显示不显示
vue :class 可以接收 字符串 数组 和 对象 对象里面的key值 根据true或false 显示不显示 https://cn.vuejs.org/v2/guide/class-and-sty ...
- 仵航说 Vue用replace修改数组中对象的键值或者字段名 仵老大
仵航说 Vue用replace修改数组中对象的键值或者字段名 仵老大 1.介绍 先看图 今天在项目中遇到了一个问题,例如我现在需要传一些数据到后端,数组例如是 let arr = [ {" ...
- vue 监听对象里的特定数据
vue 监听对象里的特定数据变化 通常是这样写的,只能监听某一个特定数据 watch: { params: function(val) { console.log(val) this.$ajax.g ...
- 11.VUE学习之提交表单时拿到input里的值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
随机推荐
- EBS 第一个项目 学习总结 ---- 发运模块
EBS 组织架构: (一)业务组(BG) (二)法律实体(LE) (三)业务实体(OU) (四)库存组织(INV) (五)公司成本中心(Cost Center) (六)HR组织 (七)多组织接入控制 ...
- BZOJ3376: [Usaco2004 Open]Cube Stacking 方块游戏
[传送门:BZOJ3376] 简要题意: 约翰和贝茜在玩一个方块游戏.编号为1到n的n(1≤n≤30000)个方块正放在地上.每个构成一个立方柱. 游戏开始后,约翰会给贝茜发出P(1≤P≤100000 ...
- 插入css样式表的三种方法
http://www.w3school.com.cn/css/css_howto.asp http://www.runoob.com/css/css-howto.html 当读到一个样式表时,浏览器会 ...
- C# MVC js 跨域
js 跨域: 第一种解决方案(服务端解决跨域问题): 跨域是浏览器的一种安全策略,是浏览器自身做的限制,不允许用户访问不同域名或端口或协议的网站数据. 只有域名(主域名[一级域名]和二级域名).端口号 ...
- js 判断浏览器是否滚动到底部
//jquery 实现代码 $(document).height() == $(window).height() + $(window).scrollTop() 1 整个空间的高度 包含(滚动条距离顶 ...
- 分享一个js对象开发组件写法
var TextCount = (function(){ //私有方法,外面将访问不到 var _bind = function(that){ that.input.on('keyup',functi ...
- 分享一段wap框架样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Multi-process Architecture
For Developers > Design Documents > Multi-process Architecture This document describes Ch ...
- ttf字体转换成web中使用的woff、svg、eot格式字体
网站地址:http://www.fontsquirrel.com/tools/webfont-generator(还可以缩小字体文件大小,强烈推荐) ttf转换成eot格式的字体软件:EOTFAST. ...
- CentOS yum安装mcrypt详细图解教程
CentOS yum安装mcrypt详细图解教程 在Linux的发行版CentOS 6.3 系统下,LAMP(Linux+Apache+Mysql+php)环境搭建好后发现PHPMyadmin提示 “ ...