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

devtools/2024/10/20 15:55:19/

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

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


http://www.ppmy.cn/devtools/111306.html

相关文章

力扣--649.Dota2参议院

Dota2 的世界里有两个阵营:Radiant(天辉)和 Dire(夜魇) Dota2 参议院由来自两派的参议员组成。现在参议院希望对一个 Dota2 游戏里的改变作出决定。他们以一个基于轮为过程的投票进行。在每一轮中,每一位参…

ElementUI2.x El-Select组件 处理使用远程查找时下拉箭头丢失问题

1、问题描述 elementui2.x版本使用el-select组件的remote-method远程查找时&#xff0c;发现下拉箭头丢失了&#xff0c;且当查找接口返回数据为空时&#xff0c;也不会展开下拉列表来显示暂无数据提示&#xff1b; 2、源码解析 官网使用示例&#xff1a; <template>…

鱼类检测-目标检测数据集(包括VOC格式、YOLO格式)

鱼类检测-目标检测数据集&#xff08;包括VOC格式、YOLO格式&#xff09; 数据集&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1B4o8IgOmAWeQJDWpJWxqXg?pwdjaco 提取码&#xff1a;jaco 数据集信息介绍&#xff1a; 共有 2848 张图像和一一对应的标注文件 标注文…

机器学习:逻辑回归--过采样

目录 前言 一、为什么使用过采样&#xff1f; 二、代码实现 1.完整代码 2.数据预处理 3.进行过采样 4.建立模型 5.绘制混淆矩阵 总结 前言 过采样&#xff08;Oversampling&#xff09;是指在数据处理或机器学习中&#xff0c;增加少数类样本的数量以平衡类别分布。常…

图片详解,最简单易懂!!!Ubuntu增强功能

文章目录 共享粘贴板共享文件夹vim 共享粘贴板 双击 输入认证用户密码 显示这个界面 命令行界面 reboot就会重新启动 虚拟机 设置下面的选项&#xff0c;就可以实现共享粘贴 共享文件夹 先在本机&#xff08;windows&#xff09;新建一个共享文件夹 再在ubuntu建一个共…

Web日志分析工具GoAccess

目录 1. 介绍 2. 功能 3. 支持的格式 4. 安装 从发布版本构建 从GitHub构建&#xff08;开发&#xff09; 命令行安装 5. 使用 5.1 监视Apache日志 5.2 通过web仪表板查看日志 浏览器访问 5.3 汉化设置 测试访问 1. 介绍 GoAccess是一个开源的实时网络日志分析器和…

Axure设计之全屏与退出全屏交互实现

在Axure RP中&#xff0c;设计全屏与退出全屏的交互功能可以极大地提升用户体验&#xff0c;尤其是在展示产品原型或进行演示时。本文将详细介绍如何在Axure RP中通过结合JavaScript代码实现全屏与退出全屏的交互效果。 ​ Axure原型设计web端交互元件库&#xff1a;https://…

Java 常用集合方法详解

在 Java 编程中&#xff0c;集合框架提供了丰富的数据结构和算法来存储和操作数据。集合框架主要包含了 List、Set 和 Map 接口&#xff0c;其中 List 和 Map 是最常用的接口。本文将深入探讨 List 和 Map 接口下的集合类及其常用方法&#xff0c;包括实际应用示例和代码片段。…