vue keepalive 动态设置缓存
场景:A首页、B列表页、C详情页
B---->C 缓存‘列表1’详情的数据
A---->C 读取‘列表1’详情的数据
B---->C
(希望清除‘列表1’的缓存,变成缓存‘列表2’详情的数据)
A---->C 问题出现了,读取的竟然还是‘列表1’的缓存数据。
main.vue
<!--缓存的视图-->
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
</router-view>
</keep-alive>
<!--不缓存的视图-->
<router-view v-if="!$route.meta.keepAlive">
</router-view>
router.js
{ meta:{ keepAlive:true },path:'editNotice',title:'编辑生产通知单',name:'editNotice',icon:'ios-paper', component: () => import('@/views/production-order/edit-notice.vue')},
缓存的页面刷新缓存的操作
activated(){ //keepAlive组件激活才会触发的钩子,用于重新获取数据进而保存更新的缓存
this.againGetData = this.$route.query.activated;
if(this.againGetData === true){
//获取详情的请求
this.getDetailHttp()
};
this.$route.query.activated = false //初始化路由的参数
},
vue keepalive 动态设置缓存的更多相关文章
- Vue.之. 动态设置按钮Disabled
Vue.之. 动态设置按钮Disabled 按钮代码如下: 添加了一个 属性 :disabled="isAble" ,控制:更新按钮.重置按钮 <el-form- ...
- Vue系列——动态设置img标签的src属性
声明 本文转自:vue动态设置img的src路径 正文 相信开发的小伙伴已经遇到这个问题了,动态切换img标签的src时,写的路径就是不生效,原因是vue并没有把你的路径字符串当做路径来处理,而是直接 ...
- vue keep-alive内置缓存组件
1.当组件在keep-alive被切换时将会执行activeted和deactiveted两个生命周期 2.inlude 正则表达式或字符串 ,只有符合条件的组件会被缓存 exclude正则表达式或字 ...
- vue中动态设置echarts画布大小
document.getElementById('news-shopPagechart').style.height = this.heightpx2+'px'; //heightpx2定义在data ...
- vue Element动态设置el-menu导航当前选中项
1,npm install vuex --save 2,在src下新建vuex文件夹,新建store.js文件: store.js import Vue from 'vue' import Vuex ...
- 【转】vue中动态设置meta标签和title标签
因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 { path: '/teachers', name ...
- Vue匿名组件使用keep-alive后动态清除缓存
在使用Vue开发管理系统项目的时候,为了保存页面的浏览状态,我们可以使用内置组件keep-alive来缓存组件内部状态,避免重新渲染. <keep-alive> <router-vi ...
- vue缓存之keep-alive,设置想要缓存的页面
由于项目需求从a页面跳转到b页面,返回a页面,a页面数据不能被刷新掉,方法很多列举12 方法1 a页面通过学期按钮切换学期,该学期里more进入b页面,返回a页面,返回回到对应a页面进入的高亮按钮设置 ...
- Vue keep-alive如何实现只缓存部分页面
prop: include: 字符串或正则表达式.只有匹配的组件会被缓存. exclude: 字符串或正则表达式.任何匹配的组件都不会被缓存. 在2.1.0版本Vue中 常见用法: // 组件 exp ...
随机推荐
- CopyOnWriteArrayList源码解析
Java并发包提供了很多线程安全的集合,有了他们的存在,使得我们在多线程开发下,可以和单线程一样去编写代码,大大简化了多线程开发的难度,但是如果不知道其中的原理,可能会引发意想不到的问题,所以知道其中 ...
- Python基础(文件操作)
文件读取: #文件读取方式一 f=open("a.txt","r+",encoding="utf8") data=f.read() prin ...
- 【Python3爬虫】大众点评爬虫(破解CSS反爬)
本次爬虫的爬取目标是大众点评上的一些店铺的店铺名称.推荐菜和评分信息. 一.页面分析 进入大众点评,然后选择美食(http://www.dianping.com/wuhan/ch10),可以看到一页有 ...
- JavaScript一看就懂(3)数组
定义数组 var a = [1, 2, 3]; typeof a; //"object", 数组是对象 a.length; //数组长度 相关操作 a[0]; //下标访问 a.p ...
- 如何开发AR增强现实应用与产品
2016年被称为VR元年,可见火爆程度,但是我要告诉你,其实还有一种技术AR(增强现实)技术,才是下一个真正的“风口”技术.可以预见的是,未来AR应用爆发之时,必将超越VR产业规模,开拓千亿级市场空间 ...
- [翻译] 使用 Python 创建你自己的 Shell:Part II
目录 使用 Python 创建你自己的 Shell:Part II 原文链接与说明 步骤 4:内置命令 最后的想法 使用 Python 创建你自己的 Shell:Part II 原文链接与说明 htt ...
- [翻译]Mock 在 Python 中的使用介绍
目录 Mock 在 Python 中的使用介绍 原文链接与说明 恐惧系统调用 一个简单的删除函数 使用 Mock 重构 潜在陷阱 向 'rm' 中加入验证 将文件删除作为服务 方法 1:模拟实例的方法 ...
- 通过 UI 管理 docker
Docker 正在被用在越来越多的场景中,对于不太习惯命令行工具的朋友来说,docker cli 用起来可能会比较吃力.本文笔者将介绍一个功能强大的 docker web 客户端:portainer( ...
- AspNetCore 中使用 InentityServer4(2)
基于上一篇文章 实现对IdnetityServer4 服务的使用 1:添加接口解决方案,并且使接口受认证服务的保护: 首先在解决方案中添加Api项目如下图所示: 在API项目中添加Nuget 引用 如 ...
- 第一册:lesson 119.
原文: A true story. question:Who called out to the thieves in the dark? Do you like stories? I want to ...