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

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 此时number类型；但是，刷新之后，变成了string类型，此时下面的判断就不太严谨了，出现了错误判断。

五、解决方式

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