vue keepalive 动态设置缓存
场景:A首页、B列表页、C详情页
B---->C 缓存‘列表1’详情的数据
A---->C 读取‘列表1’详情的数据
B---->C
(希望清除‘列表1’的缓存,变成缓存‘列表2’详情的数据)
A---->C 问题出现了,读取的竟然还是‘列表1’的缓存数据。
main.vue
1 2 <!--缓存的视图--> 3 <keep-alive> 4 <router-view v-if="$route.meta.keepAlive"> 5 </router-view> 6 </keep-alive> 7 <!--不缓存的视图--> 8 <router-view v-if="!$route.meta.keepAlive"> 9 </router-view>
router.js
1 { meta:{ keepAlive:true },path:'editNotice',title:'编辑生产通知单',name:'editNotice',icon:'ios-paper', component: () => import('@/views/production-order/edit-notice.vue')},
缓存的页面刷新缓存的操作
1 activated(){ //keepAlive组件激活才会触发的钩子,用于重新获取数据进而保存更新的缓存
2 this.againGetData = this.$route.query.activated; 3 if(this.againGetData === true){ 20 //获取详情的请求 21 this.getDetailHttp() 22 }; 23 this.$route.query.activated = false //初始化路由的参数
24 },
转载于:https://www.cnblogs.com/web-zqk/p/9675259.html
vue keepalive 动态设置缓存相关推荐
- vue中动态设置背景渐变色
vue中动态设置背景渐变色 1.效果展示 2.核心(动态更换单一的背景颜色也可以使用) <div class="ss" v-bind:style="{ backgr ...
- 若依 vue前端 动态设置路由path不同参数 在页面容器里打开新页面(新路由),面包屑和标签页标题根据参数动态改变,面包屑多级标题,侧边栏对应菜单亮起
前言 因为是在vue源码的基础上进行修改,所以,就没有复制代码在文章上,采取的是截图对比源码和我修改的代码片段.要麻烦你们自己手敲了. 先来看看效果: 场景:在费用配置列表中,点击每一项的配置,都会在 ...
- vue.js动态设置VueComponent高度遇到的问题
1.获取HTML元素高度 <div v-for="data in list"><div ref="abc">{{data.id}}< ...
- Vue—keepAlive 动态管理页面缓存
简介 <keep-alive>是Vue的内置组件,当他包裹组件时,会对组件进行缓存,不去销毁组件. 首次进入页面时,会触发mounted和activated钩子,当页面被缓存下来后,进入页 ...
- vue项目动态设置浏览器标题title两种方法
各位铁汁们,老步骤先效果图奉上 方法一.使用插件vue-wechat-title来设置浏览器动态标题 第一步:安装插件 1. npm vue-wechat-title --save 第二步:在全局ma ...
- Vue中动态设置页面title
前言 更多内容,请访问我的 个人博客. 安装依赖 npm install vue-wechat-title --save 复制代码 在mian.js中引入 //设置title import VueWe ...
- vue中动态设置style样式和使用filters过滤器设置样式
例如:想给图片增加高度和宽度 <el-image :class="classRotation"v-if="imageData.src !== undefined&q ...
- vue uniapp 动态设置页面背景图
在uniapp中的背景图需要动态变换 一般结合后台返回数据渲染 很简单 但是每次都记不住 自己写写加深印象 这里是简单的html 代码 <view class="loginBg&quo ...
- Vue中动态设置img的src不生效的原因
因为动态添加src被当做静态资源处理了,没有进行编译,所以要加上require. <template><img class="logo" :src="l ...
最新文章
- C语言程序设计代码树,校门外的树 (C语言代码)
- java indexof int_Java Stack indexOf(Object, int)用法及代码示例
- java 命令行 读取文件_java读取txt文件
- Zull路由网关---SpringCloud
- 《深度探索C++对象模型》调用虚函数
- cnn风格迁移_愚蠢的CNN,换个马甲就认不出猫!但,这病能治 | ICLR Oral
- java与自动化的应用实例_自动化测试中java多线程的使用实例
- html在线播放mp4文件,使用HTML5视频在Firefox中播放MP4文件
- power iso linux启动盘,怎么用poweriso制作u盘启动盘win10_poweriso制作u盘启动盘win10详细步骤...
- PCWorld测评的2012版世界级杀毒软件
- 引用阿里图标库的三种方式——多色图标我选symbol
- Android 做服务器NanoHTTPD使用
- 数字电路逻辑符号和逻辑图形符号
- 概率统计笔记之 “数学期望和方差”
- 前程无忧招聘信息数据清洗+聚类分析
- 移动平均线rolling()与加权移动平均线ewm()
- 关于getc与fgetc和getchar的本质区别
- 二阶常系数齐次线性微分方程通解的求取
- 叮叮获取所有用户信息_钉钉小程序获取用户信息
- 2020年中国人力资源科技“十大趋势”丨研报系列