vue项目使用query传参的坑

817 阅读1分钟

一、现象

在vue项目中使用$router.push的path+query传参的时候,存在一些问题---(页面刷新导致query参数的类型发生变化)

二、使用场景

在一些后台项目中,需要控制某部分代码的显示与隐藏时,我习惯在path+query传参的时候,使用一个boolean的参数来进行标识。

三、代码分析

    console.log(typeof this.$route.query.archive)

首次取到archive的数据类型为boolean,可以正常实现想要的功能,根据boolean值让页面实现显示隐藏。 有时候传过来的archive的值为false时,就会发现第一次进入页面会满足需求,刷新之后页面就会发生变化。

四、问题分析

在首次进入页面的时候,拿到的archive值是boolean,刷新页面之后archive的数据类型变成了string。由于数据类型的变化、判断不严谨导致了这个问题

这里补充一些容易混淆的boolean值判断。

    typeof(true) //true
    typeof(false) //false
    typeof('true') //true
    typeof('false') //false

五、解决方法

在页面初始化的时候,将接收到的变量转换为需要的变量类型(我这里将string转换为boolean)。