keepAlive 实现的保活

MMNHD

已于 2022-04-15 22:54:14 修改

阅读量803

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： elementui vue.js eureka

于 2022-02-11 21:47:14 首次发布

本文链接：https://blog.csdn.net/m0_63327154/article/details/122888971

vue 专栏收录该内容

45 篇文章

订阅专栏

本文介绍了Vue中keep-alive组件的使用，用于在路由切换时保持组件状态，避免重复渲染。通过meta属性动态控制路由的缓存，并探讨了在 MintUI 框架下遇到的鼠标滚动加载数据问题，以及如何在activated和deactivated生命周期钩子中处理滚动状态。同时，提到了通过include属性动态配置缓存的组件名单，以实现更灵活的缓存策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

route/index.js   路由里添加meta元数据
 {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
    // 元数据meta, 用于自定义属性
    meta: {
      // 属性名随意
      keepAlive: true, //代表 保持活动
    },





 <!-- 占位符 -->
    <!-- 默认情况下, 路由会自动节省内存: 只保存当前显示的组件, 切换掉的组件 会自动销毁 -->
    <!-- keep-alive: 保持-存活 简称 保活 -->
    <keep-alive>
      <!-- 判断: 如果当前路由是保持活动, 则显示这个router-view -->
      <router-view v-if="$route.meta.keepAlive" />
      <!-- 没有在meta中声明 keepAlive属性, 则值是 undefined -->
      <!-- if判断 会认为是false -->
    </keep-alive>
    <!-- 如果不存在 keepAlive属性, 则显示此处, 不需要保活 -->
    <router-view v-if="!$route.meta.keepAlive" />

在mintui保活状态下鼠标滚动 bug 一直加载数据

 activated() {
    console.log("/home/index activated..");
     this.isLoading = false; //启用曲线滚动
  },
  deactivated() {
    console.log("/home/indexdeactivated......");
     this.isLoading = true; //禁用无限滚动
  },

keep-alive 详细地址：

多组件保活必须是组件注册的名例如： News.vue Mes.vue

<keep-alive :include="[ ' News ',' Mesage ' ]"> </keep-alive>