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一致,否则会没有效果。


相关文章
|
3月前
|
缓存 JavaScript 搜索推荐
vue中的一个内置组件Keep-Alive的作用及使用方法介绍——缓存不活动的组件实例
vue中的一个内置组件Keep-Alive的作用及使用方法介绍——缓存不活动的组件实例
170 1
|
3月前
|
缓存 JavaScript UED
Vue 的动态组件与 keep-alive
【10月更文挑战第19天】总的来说,动态组件和 `keep-alive` 是 Vue.js 中非常实用的特性,它们为我们提供了更灵活和高效的组件管理方式,使我们能够更好地构建复杂的应用界面。深入理解和掌握它们,以便在实际开发中能够充分发挥它们的优势,提升我们的开发效率和应用性能。
53 18
|
3月前
|
缓存 JavaScript UED
vue的动态组件 keep-alive
【10月更文挑战第6天】
51 3
|
4月前
|
缓存 JavaScript
vue使用keep-alive实现页面前进刷新,后退缓存,完美运行无bug
vue使用keep-alive实现页面前进刷新,后退缓存,完美运行无bug
649 1
|
4月前
|
缓存 JavaScript
Vue中的keep-alive是什么意思?以及如何使用
Vue中的keep-alive是什么意思?以及如何使用
234 0
|
缓存 JavaScript
示例vue 的keep-alive缓存功能的实现
本篇文章主要介绍了vue 的keep-alive缓存功能的实现,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。
847 0
|
14天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
82 1
|
25天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
54 1
vue学习第一章
|
2月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
49 1