Vue中 path + query 传参的坑（参数类型变化）

骑猪看日落 2021-08-02 17:52 535阅读 0赞

### Vue中 path + query 传参的坑 ###

#### 一、概述 ####

在我们使用Vue中 path + query 方式传参的时候，这里存在一些坑或者说是现象（`参数类型因为刷新而变化`），记录一下，供大家学习。

--------------------

#### 二、使用场景 ####

我们在使用Vue中 path + query 方式传参的时候，可以使用参数中的某一个作为区分新增与编辑的标识。就我的个人习惯而言，我通常会传参数0为新增，具体的非0参数为编辑（后端中主键是不能为零的）。

--------------------

#### 三、代码分析 ####

this.getDistributorsList();
        //注意数据类型的转换，在进进入新增页面的时候，路由中的ruleid，其实为string类型，刷新之后，会执行加载规则详情的函数，这点事不符合要求的。
        console.log(typeof(this.$route.query.ruleid))
        this.ruleDetailsParameter.ruleid = Number(this.$route.query.ruleid);
        console.log(this.$route.query.ruleid,'3333333333333')
        if (this.ruleDetailsParameter.ruleid) { 
            this.getRuleDetails();
        }

逻辑阐述：地址栏链接为 `www.baidu.com/intergralRules?ruleid=0`在判断接收的 `ruleid` 为 `0` 的时候，编辑新增，不调用详情接口 `getRuleDetails`；反之，调用详情接口`getRuleDetails`。

--------------------

#### 四、坑点 ####

坑点：在进入新增页面的时候，`ruleid = 0` 0 此时`numbe`r类型；但是，刷新之后，变成了`string`类型，此时下面的判断就不太严谨了，出现了错误判断。

--------------------

#### 五、解决方式 ####

解决方式：根据需要，在`created` 钩子中，我们首先转化接收的变量为我们需要的变量类型（我这里把参数转化为`number`类型）