vue 页面缓存 keep-alive(含配置清除页面缓存 exclude,局部缓存,动态缓存,路由控制缓存 $route.meta.keepAlive)

简介: vue 页面缓存 keep-alive(含配置清除页面缓存 exclude,局部缓存,动态缓存,路由控制缓存 $route.meta.keepAlive)

添加页面缓存

src/App.vue

使用keep-alive组件包裹,则再次进入页面时,会使用缓存中的组件,不会重新渲染(不再执行mounted及之前的生命周期中的代码),用于保存组件的原始状态(所有变量的值保持最终状态不变)

<keep-alive>
    <router-view></router-view>
</keep-alive>

清除页面缓存

若部分页面希望每次打开时,都重新渲染(所有变量初始化为data中定义的值,并执行mounted及之前的生命周期中的代码),则需清除页面缓存

方式一:在 <keep-alive> 上添加 exclude属性

属性值为需清除缓存的页面的vue文件的name属性的值

比如针对 /test 路由对应的 test.vue组件清除缓存,则需

1. 给 test.vue 文件添加 name属性,值为“test” (可自定义为任意字符串)

    export default {
        name:'test',

2. 在 <keep-alive> 上添加 exclude属性

<keep-alive exclude="test" >
    <router-view></router-view>
</keep-alive>

若针对多个页面清除缓存,则使用 , 将name属性值隔开

<keep-alive exclude="test1,test2" >
    <router-view></router-view>
</keep-alive>

或使用正则表达式(注意需用:绑定exclude,正则表达式用“”包裹)

<keep-alive :exclude="/^test.*/" >
    <router-view></router-view>
</keep-alive>

方式二:通过路由传参实现  $route.meta.keepAlive

将 src/App.vue 中改为

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

在定义路由的文件中,设置 meta.keepAlive 参数,如在 src/routes.js 中

  • 定义路由——使用缓存的页面
    // 使用缓存的页面
    {
        path: '/SUI',
        meta: {
            keepAlive: true
        },
        name: 'SUI官网',
        component: resolve => require(['@/projects/SUIweb/index'], resolve)
    },
  • 定义路由——不使用缓存的页面
    // 不使用缓存的页面
    {
        path: '/dic',
        name: '速查手册',
        component: resolve => require(['@/projects/dic/index'], resolve)
    },

局部缓存

若同一页面中,有的组件使用缓存,有的组件不使用缓存,则使用keep-alive组件包裹需要使用缓存的组件即可

<!--列表组件使用缓存-->
<keep-alive >
    <List />
</keep-alive>
 
<!--详情组件不使用缓存-->
<Detail />

动态缓存

现需实现以下功能:

  • 从文章新增页面到文章列表页面——刷新文章列表
  • 从文章详情页面到文章列表页面——不刷新文章列表

即从不同页面进入相同页面,有时需使用缓存,有时不使用缓存,这时需使用到 beforeRouteLeave(to, from, next)

文章列表页的路由定义

{
  path: '/list',
  name: '文章列表',
  component: List.vue,
  meta: {
    keepAlive: true // 需要被缓存
  }
}

文章新增页面组件中,设置beforeRouteLeave

export default {
  beforeRouteLeave(to, from, next) {
    // 让文章列表不缓存,即刷新
    to.meta.keepAlive = false; 
    next();
  }
};

文章详情页面组件中,设置beforeRouteLeave

export default {
  beforeRouteLeave(to, from, next) {
    // 让 文章列表页面 缓存,即不刷新
    to.meta.keepAlive = true; 
    next();
  }
};


目录
相关文章
|
30天前
|
缓存 JavaScript 搜索推荐
vue中的一个内置组件Keep-Alive的作用及使用方法介绍——缓存不活动的组件实例
vue中的一个内置组件Keep-Alive的作用及使用方法介绍——缓存不活动的组件实例
90 1
|
18天前
|
存储 缓存 监控
配置 Webpack 5 持久化缓存时需要注意哪些安全问题?
【10月更文挑战第23天】通过全面、系统地分析和应对安全问题,能够更好地保障 Webpack 5 持久化缓存的安全,为项目的成功构建和运行提供坚实的安全基础。同时,要保持对安全技术的关注和学习,不断提升安全防范能力,以应对日益复杂的安全挑战。
|
1月前
|
存储 缓存 监控
|
2月前
|
缓存 监控 负载均衡
在使用CDN时,如何配置缓存规则以优化性能
在使用CDN时,如何配置缓存规则以优化性能
|
1月前
|
缓存 NoSQL 数据处理
原生php实现redis缓存配置和使用方法
通过上述步骤,你可以在PHP项目中配置并使用Redis作为高性能的缓存解决方案。合理利用Redis的各种数据结构和特性,可以有效提升应用的响应速度和数据处理效率。记得在实际应用中根据具体需求选择合适的缓存策略,如设置合理的过期时间,以避免内存过度消耗。
50 0
|
2月前
|
缓存 JavaScript
vue使用keep-alive实现页面前进刷新,后退缓存,完美运行无bug
vue使用keep-alive实现页面前进刷新,后退缓存,完美运行无bug
499 1
|
1月前
|
存储 缓存 NoSQL
数据的存储--Redis缓存存储(一)
数据的存储--Redis缓存存储(一)
|
1月前
|
消息中间件 缓存 NoSQL
Redis 是一个高性能的键值对存储系统,常用于缓存、消息队列和会话管理等场景。
【10月更文挑战第4天】Redis 是一个高性能的键值对存储系统,常用于缓存、消息队列和会话管理等场景。随着数据增长,有时需要将 Redis 数据导出以进行分析、备份或迁移。本文详细介绍几种导出方法:1)使用 Redis 命令与重定向;2)利用 Redis 的 RDB 和 AOF 持久化功能;3)借助第三方工具如 `redis-dump`。每种方法均附有示例代码,帮助你轻松完成数据导出任务。无论数据量大小,总有一款适合你。
74 6
|
6天前
|
缓存 NoSQL 关系型数据库
大厂面试高频:如何解决Redis缓存雪崩、缓存穿透、缓存并发等5大难题
本文详解缓存雪崩、缓存穿透、缓存并发及缓存预热等问题,提供高可用解决方案,帮助你在大厂面试和实际工作中应对这些常见并发场景。关注【mikechen的互联网架构】,10年+BAT架构经验倾囊相授。
大厂面试高频:如何解决Redis缓存雪崩、缓存穿透、缓存并发等5大难题
|
7天前
|
存储 缓存 NoSQL
【赵渝强老师】基于Redis的旁路缓存架构
本文介绍了引入缓存后的系统架构,通过缓存可以提升访问性能、降低网络拥堵、减轻服务负载和增强可扩展性。文中提供了相关图片和视频讲解,并讨论了数据库读写分离、分库分表等方法来减轻数据库压力。同时,文章也指出了缓存可能带来的复杂度增加、成本提高和数据一致性问题。
【赵渝强老师】基于Redis的旁路缓存架构