场景: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. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础:ES6初体验 & 模块化编程

    缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...

  2. Linux知识要点(文件压缩打包解压缩)

    tar 的选项与参数非常的多!我们只讲几个常用的选项,更多选项您可以自行 man tar 查询啰! 其实最简单的使用 tar 就只要记忆底下的方式即可(gzip方式): 压 缩: tar -zcvf ...

  3. 一句话,讲清楚java泛型的本质(非类型擦除)

    背景 昨天,在逛论坛时遇到个这么个问题,上代码: public class GenericTest { //方法一 public static <T extends Comparable< ...

  4. C#反射调用方法实例

    下面是两个反射的实例 案例1: 动态调用类中的方法.传入参数,并获得返回值. xxxx:类名 Event:类中的方法 pra1,pra2,pra3:方法对应的入参 DoRet:方法返回的执行结果 Ty ...

  5. c#文件图片操作

    系统特殊目录路径 //取得特殊文件夹的绝对路径 //桌面 Environment.GetFolderPath(Environment.SpecialFolder.Desktop); //收藏夹 Env ...

  6. Asp.Net MVC Https设置

    1.   IIS设置 1.1 创建SSL证书 点击左侧菜单栏顶部,点击“功能视图”里的“服务器证书”: 点击“创建自动签名证书”创建自动签名证书: 1.2 设置SSL证书 点开网站,在“功能视图”里点 ...

  7. SpringBoot2 java配置方式 Configuration和PropertySource结合读取配置文件

    JdbcConfig.java Configuration是配置文件 PropertySource 引入配置文件 value读取配置文件内容 package cn.itcast.config; imp ...

  8. Java并发——synchronized关键字

    前言: 只要涉及到Java并发那么我们就会考虑线程安全,实际上能够实现线程安全的方法很多,今天先介绍一下synchronized关键字,主要从使用,原理介绍 一.synchronized的使用方法 1 ...

  9. PPT在HTML网页上播放方法

    项目中遇到一个需求:要求PPT在HTML网页上播放,而且要像电脑一样播放PPT,大家能想到的是什么方法? 印象中我好像有在网上见到过PPT模板网站上的PPT可以播放,赶紧百度搜了下发现都是用第三方软件 ...

  10. javascript排序算法-快速排序

    快速排序 概念: (1) 首先,从数组中选择中间一项作为主元. (2) 创建两个指针,左边一个指向数组第一个项,右边一个指向数组最后一个项.移动左指针直到我们找到一个比主元大的元素,接着,移动右指针直 ...