场景: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 动态设置缓存的更多相关文章

  1. Vue.之. 动态设置按钮Disabled

    Vue.之. 动态设置按钮Disabled 按钮代码如下: 添加了一个 属性      :disabled="isAble"  ,控制:更新按钮.重置按钮 <el-form- ...

  2. Vue系列——动态设置img标签的src属性

    声明 本文转自:vue动态设置img的src路径 正文 相信开发的小伙伴已经遇到这个问题了,动态切换img标签的src时,写的路径就是不生效,原因是vue并没有把你的路径字符串当做路径来处理,而是直接 ...

  3. vue keep-alive内置缓存组件

    1.当组件在keep-alive被切换时将会执行activeted和deactiveted两个生命周期 2.inlude 正则表达式或字符串 ,只有符合条件的组件会被缓存 exclude正则表达式或字 ...

  4. vue中动态设置echarts画布大小

    document.getElementById('news-shopPagechart').style.height = this.heightpx2+'px'; //heightpx2定义在data ...

  5. vue Element动态设置el-menu导航当前选中项

    1,npm install vuex --save 2,在src下新建vuex文件夹,新建store.js文件: store.js import Vue from 'vue' import Vuex ...

  6. 【转】vue中动态设置meta标签和title标签

    因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 { path: '/teachers', name ...

  7. Vue匿名组件使用keep-alive后动态清除缓存

    在使用Vue开发管理系统项目的时候,为了保存页面的浏览状态,我们可以使用内置组件keep-alive来缓存组件内部状态,避免重新渲染. <keep-alive> <router-vi ...

  8. vue缓存之keep-alive,设置想要缓存的页面

    由于项目需求从a页面跳转到b页面,返回a页面,a页面数据不能被刷新掉,方法很多列举12 方法1 a页面通过学期按钮切换学期,该学期里more进入b页面,返回a页面,返回回到对应a页面进入的高亮按钮设置 ...

  9. Vue keep-alive如何实现只缓存部分页面

    prop: include: 字符串或正则表达式.只有匹配的组件会被缓存. exclude: 字符串或正则表达式.任何匹配的组件都不会被缓存. 在2.1.0版本Vue中 常见用法: // 组件 exp ...

随机推荐

  1. 2019-中小型公司PHP面试题目记录(附带答案)

    博主是三线省会城市的苦逼技术开发,主攻PHP方向,平时前后端语言也都有涉及,因为都是自学,上手就是框架,工作五年来基础补的不稳,换工作的时候苦不堪言,感觉一上来就问Ngnix的运行机制,php的被编译 ...

  2. expect实现自动交互由浅入深

    expect实现自动交互由浅入深 作为运维人员可以通过Shell可以实现简单的控制流功能,如:循环.判断等.但是对于需要交互的场合则必须通过人工来干预,有时候我们可能会需要实现和交互程序如telnet ...

  3. ADO.NET学习(一)

    一.ADO.NET简介 ADO.NET可以看作是C#语言访问数据库的一种方式.编程语言编写的程序需要数据库的支持,那么怎样才能让他们建立连接呢?当然是ADO.NET 二.ADO.NET 整体流程 1) ...

  4. 使用visualStudio2017创建一个简单的控制台程序

    步骤: 1.  打开visual studio开发工具 2. 选择文件>新建>项目 如下图所示: 3. 选择window金典桌面>控制台应用程序 并填写好想项目名称和选择项目存储地址 ...

  5. C# 创建、更改Excel命名区域(NamedRange)

    创建命名区域是指给选定的某个单元格或多个单元格区域设置名称,目的是方便我们在文件中的其他地方对该单元格区域进行引用能够简化公式引用或者方便数据管理.下面记录了具体的C#示例代码.这里创建命名区域分为了 ...

  6. python基础之逻辑运算符

    python逻辑运算符: ①and ‘与’ 总结: 如果and左边为False,则直接返回左边的结果(False) 如果and左边为True,则返回的结果取决于右边的数值 ②or ‘或’ 总结: 如果 ...

  7. Python实例----------每日一贴

    def function_tips(): '''功能:每天输出一条励志文字 ''' import datetime # 导入日期时间类 # 定义一个列表 mot = ["今天星期一:\n人生 ...

  8. nginx系列13:最少连接算法以及如何跨worker进程生效

    最少连接算法 使用最少连接算法可以使得nginx优先选择连接最少的上游服务器,需要用到upstream_least_conn模块. 如何跨worker进程生效 因为nginx是多进程结构的,默认多个w ...

  9. Flask实战第3天:url_for使用

    我们之前是通过url来找到对应的视图函数 /     =>    hello_world 那么url_for则是通过视图函数找到url hello world  =>  / 演示如下 #c ...

  10. 基于python的种子搜索网站-项目部署

    本讲会对种子搜索网站的部署过程进行详细的讲解. 网站演示: https://bt.mypython.me 源码地址: https://github.com/geeeeeeeek/bt 项目部署过程 系 ...