vue keep-alive

最新推荐文章于 2025-09-10 14:53:18 发布

weixin_33717298

最新推荐文章于 2025-09-10 14:53:18 发布

阅读量69

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c3d875b518825253661c57e

本文详细解析了Vue.js中Router结合Keep-Alive组件实现页面缓存的技巧，通过配置路由元信息（meta），实现特定组件的状态保存与快速加载，避免了不必要的重复渲染，提高了用户体验和应用性能。

keep-alive缓存

    H组件
  <router-link></router-link>
  <keep-alive>
    <router-view  v-if="$route.meta.keepAlive"></router-view>
    <!--需要缓存的组件-->
  </keep-alive>
  <router-view  v-if="!$route.meta.keepAlive"></router-view>
  <!--不需要缓存的组件-->
  
  
  在router的index.js中
  {
    path:'/A',
    component: require('../components/A.vue'),
    meta:{
      keepAlive:true  //添加meta  A组件keepAlive为true 被缓存
    }
  }
  
  
  A组件跳转到B组件  从B组件返回A组件 A组件的数据状态不刷新(使用缓存的页面)
  
  在A组件中
  
   beforeRouteLeave(to, from, next) {
      from.meta.keepAlive = false;
      next();
    },
    
    
    在B组件中

    beforeRouteLeave(to, from, next) {
      // 设置下一个路由的 meta
      if (to.path == "/A") {
        to.meta.keepAlive = true;
      } else {
        to.meta.keepAlive = false;
      }
      next();
    },
  
复制代码