问题

今天客户给我反馈了一个BUG,说是从搜索列表页进商品详情页,然后再返回,搜索列表页的数据被刷新成了和之前毫不相干的数据。

原因

经过排查,问题出在keep-alive和watch上。

我在keep-alive的页面中监听了路由参数,在这个路由参数变化的时候请求列表。

然而在我切换到商品详情页的时候,这个监听事件又被触发了,导致搜索列表页的数据实际上已经被新的请求的数据覆盖掉了,这样就复现了客户反馈的问题。

解决

我在路由监听里面加了个判断,判断当前路由名称是不是搜索列表页,如果是搜索列表页才执行。

if (this.$route.name == "Search") {
    this.getList()
}