业务逻辑是这样的:从列表页跳转到详情页,列表页通过 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>