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

相关推荐
我是伪码农4 小时前
Vue 1.23
前端·javascript·vue.js
wqwqweee4 小时前
Flutter for OpenHarmony 看书管理记录App实战:搜索功能实现
开发语言·javascript·python·flutter·harmonyos
HIT_Weston6 小时前
107、【Ubuntu】【Hugo】搭建私人博客:模糊搜索 Fuse.js(三)
linux·javascript·ubuntu
henujolly9 小时前
ethers.js读取合约信息
开发语言·javascript·区块链
毕设源码-郭学长9 小时前
【开题答辩全过程】以 基于Web的高校课程目标达成度系统设计与实现为例,包含答辩的问题和答案
前端
wuhen_n10 小时前
高阶函数与泛型函数的类型体操
前端·javascript·typescript
POLITE311 小时前
Leetcode 437. 路径总和 III (Day 16)JavaScript
javascript·算法·leetcode
難釋懷11 小时前
解决状态登录刷新问题
java·开发语言·javascript
ヤ鬧鬧o.11 小时前
多彩背景切换演示
前端·css·html·html5
一起养小猫11 小时前
Flutter实战:从零实现俄罗斯方块(三)交互控制与事件处理
javascript·flutter·交互