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处理参数

相关推荐
Developer_Niuge3 分钟前
前端批量请求失败重复弹窗的正确解决方案
前端
前端小饭桌3 分钟前
告别嵌套地狱:用数据结构优化解决 JS 多层循环的混乱与静默错误
前端·javascript
爱摸鱼的格子5 分钟前
🚀 你真的会用 Promise.all 吗?10 个实用技巧助你成为异步处理大师!
前端
JacksonGao6 分钟前
React Fiber的调度算法你了解多少呢?
前端·react.js
这可不简单8 分钟前
方便易懂的自适应方案---echarts和dom样式大小自适应
前端·vue.js·echarts
玲小珑10 分钟前
Auto.js 入门指南(七)定时任务调度
android·前端
橘黄的猫10 分钟前
深入解析 import.meta.url:与 new URL() 的关系及 Vite 中的 base 路径影响
前端·vite
白瓷梅子汤12 分钟前
跟着官方示例学习 @tanStack-table --- Column Filters
前端·react.js
海的诗篇_15 分钟前
前端开发面试题总结-HTML篇
前端·面试·html
Nano15 分钟前
JavaScript ES6:现代Web开发的革命性进化
前端·javascript