vue路由传参刷新页面后参数类型改变

业务逻辑是这样的:从列表页跳转到详情页,列表页通过 query传递参数status:。详情页有一个按钮根据这个status来隐藏或者显示。
按钮代码

 <el-button type="text"  v-if="$route.query.status === 0">删除</el-button>

从列表页传递过来的参数是理论就是Number类型的,于是我用了 ===来判断

问题来了!
在详情页按下F5刷新页面,原本还在的删除按钮居然消失了!

第一反应,在create阶段 console.log(this.$route.query.status)看看,控制台看到没错啊,是0,怎么按钮就消失了呢

console.log($route.query.status === 0) ,诶,居然是false!

不应该呀,0怎么会不等于0,

再看看 console.log(typeof $route.query.status)
从列表页点击查看详情进入详情页时是Number,按下F5刷新后居然变成了String

这下发现问题所在了...

解决方法:
将参数强制转为 Number类型再判断,或者直接用 ==

 <el-button type="text"  v-if="Number($route.query.status) === 0">删除</el-button>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。