Vue使用query传参Boolean类型,刷新之后转换为String问题

做项目时发现第一次进入页面时传参是正常的Boolean类型,刷新之后变成了String,这是浏览器进行的一次强制转换;

cpp 复制代码
vue-router 传参,不管是 params 形式还是query形式传参,在页面刷新后,params 和 query
对象中的属性所对应的属性值都会被浏览器自身强制转换为string类型
(这一点与浏览器的sessionStorage和localStorage存储对象,对象会被转为string类型,不谋而合),破环原先属性值的数据类型。

要解决这个问题,不能直接Boolean处理,因为如果传入false,那么转换成字符串,Boolean('false')会变成true;

总结:

1、number数据类型:页面刷新后,其类型会转换为 string 类型。

所以,在路由刷新页面,在使用时,不管页面是否刷新,都对传递过来的属性值做一次Number()转换;

2、string数据类型:页面刷新后,其类型依然为string类型;

3、boolean数据类型:页面刷新后,其类型会转换为string类型。

4、undefined数据类型:页面刷新后,其类型依然为undefined类型;

5、null数据类型:页面刷新后,其类型依然为null类型;

6、object数据类型:页面刷新后,其类型会转换为string类型;

所以,在路由跳转传参页面对属性值做一次JSON.stringify()预处理,然后在路由刷新页面对该值进行JSON.parse()转换。

解决方法:使用JSON.parse处理参数

相关推荐
不服老的小黑哥7 分钟前
AI规范驱动编程-harness工程项目实战
前端
vivo互联网技术8 分钟前
从 Web 到桌面:基于 Tauri 2.0 + Vue 3 打造 vivo 线下门店「大头贴」拍照体验系统
前端·rust
光影少年10 分钟前
React 合成事件机制、和原生事件区别、事件冒泡阻止
前端·react.js·掘金·金石计划
没有鸡汤吃不下饭10 分钟前
告别手动对接口:我用 OpenAPI JSON 做了一个前端接口同步 Skill
前端·ai编程
空栈独白11 分钟前
NestJS实战-前后端联调
前端
米饭同学i11 分钟前
浏览器记住密码导致忘记密码页面输入框回显错乱?看这篇就够了
前端
孤舟望月11 分钟前
NestJS实战-后端开发-全局配置
前端
陆枫Larry16 分钟前
从一个按钮间距,聊透 CSS 的 gap 属性
前端
北冥有鱼16 分钟前
mqtt 测试
前端·后端
张鑫旭27 分钟前
都AI时代了,我为何还在学习前端基础知识?
前端