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 ...
随机推荐
- Python题集:2019春Python程序设计选修课习题笔记
一.判断题: 1-1.在Python 3.x中可以使用中文作为变量名. 答案:√ 1-2.Python变量使用前必须先声明,并且一旦声明就不能再当前作用域内改变其类型. 答案:× 1-3.Python ...
- 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之五 || Swagger的使用 3.3 JWT权限验证【必看】
前言 关于JWT一共三篇 姊妹篇,内容分别从简单到复杂,一定要多看多想: 一.Swagger的使用 3.3 JWT权限验证[修改] 二.解决JWT权限验证过期问题 三.JWT完美实现权限与接口的动态分 ...
- Python基础(数字,字符串方法)
数字: #二进制转十进制 a=' v=int(a,base=2) print(v) 进制转换 #当前数字的二进制至少有多少位 b=2 v2=b.bit_length() print(v2) 数值二进制 ...
- Linux知识要点(文件压缩打包解压缩)
tar 的选项与参数非常的多!我们只讲几个常用的选项,更多选项您可以自行 man tar 查询啰! 其实最简单的使用 tar 就只要记忆底下的方式即可(gzip方式): 压 缩: tar -zcvf ...
- 安装window下的redis,redis可视化管理工具(Redis Desktop Manager)安装,基础使用,实例化项目
以下包括内容: 一.redis下载安装,启动 二.Redis可视化管理工具(Redis Desktop Manager)安装 三.实例化项目 一.redis下载安装,启动 1,redis官方下载地址: ...
- C# 中的Async 和 Await 的用法详解
众所周知C#提供Async和Await关键字来实现异步编程.在本文中,我们将共同探讨并介绍什么是Async 和 Await,以及如何在C#中使用Async 和 Await. 同样本文的内容也大多是翻译 ...
- 与其争论java和.net的差别,还不如多想点用编程技术挣钱的方式
年前和最近,我发现在博客园和其它地方,有不少争论java和.net哪个好的文章,其实这是种好现象.虽然到了架构层面,技术是通用的,但兼听则明,而且技多不压身,多种挣钱的方式总不会错. 本人最近主攻Ja ...
- GlideNewDemo【Glide4.7.1版本的简单使用以及圆角功能】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 简单记录下Glide4.7.1版本的使用和实现圆角方案. 注意:关于详细使用请仔细阅读<官方指南>. 效果图 使用步骤 ...
- PhotoPickerNewDemo【PhotoPicker0.9.12的个性化修改以及使用(内部glide版本号是4.1.1)】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 本Demo使用的是PhotoPicker 0.9.12版本,里面集成的glide版本号是4.1.1.这里就不进行特殊的个性化处理了( ...
- 外行人都能看懂的SpringCloud,错过了血亏!
一.前言 只有光头才能变强 认识我的朋友可能都知道我这阵子去实习啦,去的公司说是用SpringCloud(但我觉得使用的力度并不大啊~~)... 所以,这篇主要来讲讲SpringCloud的一些基础的 ...