业务逻辑是这样的：从列表页跳转到详情页，列表页通过 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>
网友评论