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

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

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

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

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

以上实现了所有页面返回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()
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 使用vue单页开发项目时遇到一个问题:在列表页点击一条数据进入详情页,按返回键返回列表页时页面刷新了,用户体验非常...
    李亚_45be阅读 13,513评论 0 6
  • Vue-Music 一| 前期工作 1.项目初始化 npm install -g vue-cli vue init...
    noobakong阅读 1,876评论 0 5
  • vue中,我们所要实现的一个场景就是:1.搜索页面==>到搜索结果列表页时,搜索结果列表页面要重新获取数据,2.搜...
    白小纯Zzz阅读 6,807评论 0 3
  • 随感 【道德经】第五十三章,田甚芜,仓甚虚;服文采,带利剑,厌饮食,财货有馀。田园荒芜,仓库空虚。穿着华丽衣服,佩...
    祭祀祭祀阅读 85评论 0 3
  • 今天是2018的第二天。都说新年新气象,可我毫无感觉,更甚者,心如绞丝。二宝豆豆昨天送进了保温箱,本以为是普通...
    轲豆豆阅读 285评论 0 0