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

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

在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>

注:组件的name必须和路由配置的name一致,否则会没有效果。


相关文章
|
19天前
|
存储 缓存 JavaScript
缓存组件状态,提升用户体验:探索 keep-alive 的神奇世界
缓存组件状态,提升用户体验:探索 keep-alive 的神奇世界
缓存组件状态,提升用户体验:探索 keep-alive 的神奇世界
|
3天前
|
存储 缓存 JavaScript
Vue的缓存组件 | 详解KeepAlive
Vue的缓存组件 | 详解KeepAlive
8 1
|
3天前
|
缓存 JavaScript 前端开发
Vue 3的事件监听缓存如何优化性能?
【5月更文挑战第31天】Vue 3的事件监听缓存如何优化性能?
5 1
|
18天前
|
存储 缓存 JavaScript
vue中缓存页面数据(刷新不丢失)
vue中缓存页面数据(刷新不丢失)
|
18天前
|
缓存 算法 JavaScript
vue中组件保活<keep-alive>的使用
vue中组件保活<keep-alive>的使用
|
19天前
|
缓存 JavaScript
vue 中 keep-alive 组件的作用
vue 中 keep-alive 组件的作用
16 1
|
19天前
|
缓存 JavaScript UED
vue中keep-alive的用法和含义
Vue.js 的 `&lt;keep-alive&gt;` 组件用于缓存不活动的组件实例,避免销毁并优化性能。当组件切换时,状态得以保持。用法是将其作为包裹组件,包含需缓存的组件。例如,在切换 `ComponentA` 和 `ComponentB` 时,利用 `&lt;keep-alive&gt;` 可以在状态间切换而不会丢失信息。此外,结合 `&lt;router-view&gt;` 可缓存路由组件,`include` 和 `exclude` 属性则能指定缓存特定组件,提升应用性能和用户体验。
17 1
|
19天前
|
缓存 JavaScript 网络架构
Vue.js 进阶技巧:keep-alive 缓存组件解析
Vue.js 进阶技巧:keep-alive 缓存组件解析
|
19天前
|
缓存 JavaScript 前端开发
掌握组件缓存:解开Vue.js中<keep-alive>的奥秘
掌握组件缓存:解开Vue.js中<keep-alive>的奥秘
|
3天前
|
缓存 监控 NoSQL
redis 缓存穿透 击穿 雪崩 的原因及解决方法
redis 缓存穿透 击穿 雪崩 的原因及解决方法