select中默认初始值value显示名称，页面刷新显示Id的问题 (this.$route.query刷新后类型改变)

项目需求

示例图：

 

 

*打印this.$router.query，页面刷新前后 发现值类型改变

 

 解决方法：

 

获取this.$route.query传递的参数，通常为number,但是在页面刷新后会转变为string，

这样基于此的判断条件就不生效了。

解决方法：

通过parseInt

手动转变数据类型就ok了。

 

 

补充:

vue-router传参，不管是params形式还是query形式传参，在页面刷新后，params和query对象中的属性所对应的属性值都会被浏览器自身强制转换为string类型(这一点与浏览器的sessionStorage和localStorage存储对象，对象会被转为string类型，不谋而合)，破环原先属性值的数据类型。

下面为6种数据类型属性值的解决方法：

 

1.number数据类型：页面刷新后，其类型会转换为`string`类型。那么我们在路由刷新页面，对传递过来的属性值做一次`Number()`转换，就是不管页面有没有刷新都做一次`Number()`转换；

2.string数据类型：页面刷新后，其类型依然为`string`类型，无需任何操作；

3.boolean数据类型：页面刷新后，其类型会转换为`string`类型。那么我们在路由刷新页面，对传递过来的属性值做一次`Boolean()`转换，就是不管页面有没有刷新都做一次`Boolean()`转换；

4.undefined数据类型：页面刷新后，其类型依然为`undefined`类型，无需任何操作；

5.null数据类型：页面刷新后，其类型依然为`null`类型，无需任何操作；

6.object数据类型：页面刷新后，其类型会转换为`string`类型。那么我们在路由跳转传参页面对属性值做一次`JSON.stringify()`预处理，然后在路由刷新页面对该值进行`JSON.parse()`转换即可；