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

相关推荐
子兮曰13 小时前
async/await高级模式:async迭代器、错误边界与并发控制
前端·javascript·github
恋猫de小郭13 小时前
2026 Flutter VS React Native ,同时在 AI 时代 VS Native 开发,你没见过的版本
android·前端·flutter
GIS之路15 小时前
ArcGIS Pro 中的 Notebooks 入门
前端
IT_陈寒16 小时前
React状态管理终极对决:Redux vs Context API谁更胜一筹?
前端·人工智能·后端
lemon_yyds17 小时前
《vue 2 升级vue3 父组件 子组件 传值: value 和 v-model
vue.js
Kagol17 小时前
TinyVue 支持 Skills 啦!现在你可以让 AI 使用 TinyVue 组件搭建项目
前端·agent·ai编程
柳杉17 小时前
从零打造 AI 全球趋势监测大屏
前端·javascript·aigc
simple_lau18 小时前
Cursor配置MasterGo MCP:一键读取设计稿生成高还原度前端代码
前端·javascript·vue.js
睡不着先生18 小时前
如何设计一个真正可扩展的表单生成器?
前端·javascript·vue.js
天蓝色的鱼鱼18 小时前
模块化与组件化:90%的前端开发者都没搞懂的本质区别
前端·架构·代码规范