keepAlive实现详情页返回列表页数据不刷新 keepAlive实现详情页返回列表页

项目中经常会遇到一个需求：从页面A跳转到页面B，再返回到页面A时希望页面不刷新，保留之前的数据，常见的就是列表页跳转到详情页后再返回列表页保留之前的滚动位置及数据。vue中可以用keepAlive来实现。
是vue的内置组件，可以在组件切换的过程中将状态保存在内存中，防止重复渲染DOM。
App.vue中的router改为：

在router/index.js中将想实现不刷新的页面设置keepAlive为true

{ path:'list', name:'list', components:list, meta:{ keepAlive:true } }

【keepAlive实现详情页返回列表页数据不刷新】以上实现了所有页面返回list页面都不刷新，如果想实现只有从某个页面返回列表页页面不刷新，则需要在页面中借助beforeRouteLeave判断是从哪个页面返回，来设置keepAlive属性的值。在项目中遇到一个问题，就是从list页面可以分别跳转到选择城市/日期/关键字页面和酒店详情页，第一次进入酒店详情返回列表缓存数据是正确的，再从list页跳转到选择城市/日期/关键字页面修改了筛选条件后再返回list页，进入detail，再返回list就会出现缓存的数据仍是第一次进入时缓存的数据，最后在从list跳转非detail页面时调用强制刷新解决了问题。

beforeRouteLeave(to,from,next){ if(to.path == '/detail'){ from.meta.keepAlive = true; } else{ from.meta.keepAlive = false; window.location.reload(); // 强制刷新 } next() }