场景: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. SQL Server的case when用法

    1.简单sql一例 SELECT top 10 CASE WHEN IDENTITY_ID='1' THEN '管理员' WHEN IDENTITY_ID='5' THEN '学生' ELSE '无' ...

  2. vueJS报错记录列表以及解决方案

    1.在elem团队新出的框架里,navMenu,控制台报missing required prop "index" 解决方案: 添加index的值 2.Duplicate keys ...

  3. 手撸GitLab CI(阉割版)

    上一集我们说到如何从零开始搭建一个Vue-cli 3.0的项目,而这一集我们将说到如何手写一份阉割版的CI脚本. 首先说一下GitLab部署到服务器的操作,一般有两种,一种是规范化分离的,包含runn ...

  4. element-ui 动态换肤

    1.在安装好 element-ui@2.x 以后,首先安装sass-loader npm i sass-loader node-sass -D 2.安装 element-theme npm i ele ...

  5. 补习系列(14)-springboot redis 整合-数据读写

    目录 一.简介 二.SpringBoot Redis 读写 A. 引入 spring-data-redis B. 序列化 C. 读写样例 三.方法级缓存 四.连接池 小结 一.简介 在 补习系列(A3 ...

  6. SLAM+语音机器人DIY系列:(四)差分底盘设计——5.底盘PID控制参数整定

    摘要 运动底盘是移动机器人的重要组成部分,不像激光雷达.IMU.麦克风.音响.摄像头这些通用部件可以直接买到,很难买到通用的底盘.一方面是因为底盘的尺寸结构和参数是要与具体机器人匹配的:另一方面是因为 ...

  7. 折腾Java设计模式之单例模式

    博文原址:折腾Java设计模式之单例模式 单例模式 Ensure a class has only one instance, and provide a global point of access ...

  8. Java设计模式---Strategy策略模式

    参考于 : 大话设计模式 马士兵设计模式视频 1.场景介绍 购物网站上有一个产品,有三个字段,档次,价格,重量. 有些同学喜欢轻的,有些手头紧,想要便宜的,有些喜欢档次高的. 那么我们为了提高网站用户 ...

  9. 禁用了传说中的PHP危险函数之后,Laravel的定时任务不能执行了?

    虽然已是 2018 年,但网上依然流传着一些「高危 PHP 函数,请一定要禁用!」的标题党文章(搜索关键字:一些需要禁用的PHP危险函数). 这些文章的内容简单直接,给出 php.ini 的 disa ...

  10. layui+ztree 树状下拉框

    一.效果图 [关闭] [展开] 二.代码 [HTML]注:布局一定要用DIV不是select否则效果···· <div class="layui-form-item"> ...