keep-alive结合vuex实现特定页面的前进刷新，后退不刷新

2024年5月10日 160次阅读 来源: 大风

  类似需求：做到前进刷新数据,后退不刷新数据呢?
  有需求在微信h5页面中，底部有四个tab首页、视频、订单列表、我的，实现进入这三个页面二级页面（即产品详情、视频详情、订单详情）后，后退是缓存的组件，不需要再请求数据，但tab间的切换是需要重新请求的。
  网上实现类似需求：
  https://blog.csdn.net/leileib…
  https://www.jianshu.com/p/0b0…
  https://juejin.im/post/5a6989…
  https://segmentfault.com/a/11…
  网上大部分使用增加 router.meta 属性的方法

<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 这里是会被缓存的视图组件 -->
    </router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
    <!-- 这里是不被缓存的视图组件-->
</router-view>

  这种方法在本次场景中会有各种奇怪的问题出现，点击底部tab切换，及进入详情多次操作后，缓存会失效。在实验中尝试在组件导航守卫里添加一些判断，来销毁不需缓存的上个组件，但同样会导致缓存失效。
  需求解决：使用keep-alive中的include结合vuex、beforeRouteLeave在首页、视频、订单三个组件做特定判断。
  部分代码：

//includecomponents使用vuex
<keep-alive :include='includecomponents'>
    <router-view></router-view>
</keep-alive>

  三个页面：

beforeRouteLeave(to, from, next) {
      if (to.path == "/orderdetail") {
          //进入三个页面的二级页面，缓存的是三个组件
          let arr = ['home','videos','order']
          this.includearr(arr)
      } else {
          //tab间切换，不缓存当前组件
          let arr = ['home','videos']
          this.includearr(arr)
      }
      next();
},
    原文作者：大风
    原文地址: https://segmentfault.com/a/1190000014141289
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞