vue中页面缓存keep-alive控制缓存清除

最新推荐文章于 2024-06-28 11:10:18 发布

秋叶原的琴音

最新推荐文章于 2024-06-28 11:10:18 发布

阅读量421

点赞数

分类专栏： javascript 文章标签： vue.js 缓存 javascript

本文链接：https://blog.csdn.net/qq_27161847/article/details/121767762

版权

javascript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue.js应用中通过监听路由变化来动态管理keep-alive组件，确保组件状态的保存与清除。通过`$route`对象的参数判断，决定是否将当前路由加入到缓存列表中，实现页面切换时的平滑过渡效果。同时，强调了组件name与路由name的一致性对于keep-alive功能的重要性。

摘要由CSDN通过智能技术生成

在main.js监听路由

// 按需加载路由，监听路由变化逻辑处理
$route (to, from) {
    if (to.params.isActive) {
      this.$store.commit('d2admin/page/keepAlivePush', to.name)
    } else {
      this.$store.commit('d2admin/page/keepAliveRemove', to.name)
    }
  }

在app.vue设置keep-alive

<!-- 页面 -->
   <div class="d2-theme-container-main-body" flex-box="1">
      <transition :name="transitionActive ? 'fade-transverse' : ''">
        <keep-alive :include="keepAlive">
          <router-view />
        </keep-alive>
      </transition>
    </div>