One, the phenomenon

There are some problems when using path+query for $router.push in a vue project (page refresh causes query parameter types to change)

Two, use scenarios

In some background projects, when I need to control the display and hiding of some code, I use a Boolean parameter to identify the path+ Query parameter.

Iii. Code analysis

    console.log(typeof this.$route.query.archive)
Copy the code

For the first time, the data type of archive is Boolean, which can normally achieve the desired function. According to the Boolean value, the page can be displayed and hidden. Sometimes when you pass in false for Archive, you will find that the first time you enter the page will satisfy the requirements, and the page will change after refreshing.

Iv. Problem analysis

When first entering the page, the value of archive is Boolean. After refreshing the page, the data type of archive is changed to String. Changes in data types and lax judgment lead to this problem

Here are some confusing Boolean value judgments.

    typeof(true) //true
    typeof(false) //false
    typeof('true') //true
    typeof('false') //false
Copy the code

5. Solutions

When the page is initialized, convert the received variable to the desired variable type (I’m converting string to Boolean here).