VUE使用keep-alive之后数据无法实时更新问题

问题描述：

根据需求实现在列表页点击“编辑”进行修改某项数据，修改完成返回之后，依旧保留在原位置，保留之前的查找条件和之前的数据，使用vue中的<keep-alive>之后，返回列表页时不刷新页面，依旧保持之前的数据，无法展示修改之后的最新消息。

解决办法：

借用组件内的守卫beforeRouterEnter(){}方法，

beforeRouteEnter(to,from,next){
  
},
每次进入之后取到编辑之后的最新数据，然后把现有的列表中对应的数据进行修改，修改之后进行强制刷新，这样就可以实现需要的效果了。

　beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。

　不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。　

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。