项目开发中在用户由分类页category进入detail需保存用户状态，查阅了Vue官网后，发现vue2.0提供了一个keep-alive组件。
上一篇讲了keep-alive的基本用法，现在说说遇到的坑。
先说项目中的配置
 
在App.vue中的设置
 

在router中增加配置meta
  
 
上面这个设置后发现问题了，从category进入detail页后，状态被保存了，返回的时候保存了用户状态，达到了预期效果
但问题在于但从category返回到index后，再由index进入category时依然显示是缓存中的页面，此刻页面没有刷新。
返回index后的组件显示如下：
   
分析从index再次进入category时，直接读取了缓存的里的页面。
头大。。。。。。。我的目标只是缓存从category进入detail页面，其他的时候不缓存。
 
 
解决方案
在category中启用beforeRouteLeave钩子函数
beforeRouteLeave中只有从category进入detail时才进行缓存，其他页面都讲category的keepalive设置成false，并销毁此category组件;
 
然而，发现新的问题。。。。。。
第一次操作index--> category ---> detail的时候是理想效果，但当第二次操作返回index后，进行index --> category --> detail --> category时，发现缓存的对象又不对了，从detail返回category时，保存是的第一次进入detail的分类情况。
此刻category的组件显示如下
 
 
无奈。。。。。对比了第一次和第二次进入页面情况
 
根据vue-router提供的守卫可在路由中启用afterEach路由守卫，在afterEach中进行判断是否第一次进入，非第一次进入页面情况强制刷新一次category页面。 
 
 
至此终于解决了这个问题。
 
网友提供了其他的解决方案可以参考下，
也可以参考github上关于keep-alive缓存相关的问。

vue中使用keepAlive组件缓存遇到的坑的更多相关文章

  1. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  2. vue中的父子组件相互调用

    vue中的父子组件相互调用: 1.vue子组件调用父组件方法:子组件:this.$emit('xx'); 父组件:定义yy方法,并在引用子组件时传参,如@xx="yy" 2.vue ...

  3. Vue中 key keep-alive

    keep-alive key <!DOCTYPE html> <html> <head> <title></title> <scrip ...

  4. Vue中，父组件向子组件传值

    1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...

  5. vue中兄弟之间组件通信

    我们知道Vue中组件之间的通信有很多方式,父子之间通信比较简单,当我们使用vuex时候,兄弟组件之间的通信也很好得到解决 当我们项目较小时候,不使用vuex时候Vue中兄弟组件之间的通信是怎样进行的呢 ...

  6. vue中修改子组件样式

    一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...

  7. Vue中iframe和组件的通信

    最近的项目开发中用到了Vue组件中嵌套iframe,相应的碰到了组件和HTML的通信问题,场景如下:demo.vue中嵌入 test.html 由于一般的iframe嵌套是用于HTML文件的,在vue ...

  8. vue中8种组件通信方式, 值得收藏!

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...

  9. 在vue中使用swiper组件

    第一步:在终端的项目根目录下载安装swiper: cnpm/npm install vue-awesome-swiper --save; 第二步:在程序入口文件main.js中引用: import V ...

随机推荐

  1. python基础-------模块与包（二）

    sys模块.logging模块.序列化 一.sys模块 sys.argv           命令行参数List,第一个元素是程序本身路径 sys.exit(n)        退出程序,正常退出时e ...

  2. Java 读取 .properties 配置文件的几种方式

    Java 开发中,需要将一些易变的配置参数放置再 XML 配置文件或者 properties 配置文件中.然而 XML 配置文件需要通过 DOM 或 SAX 方式解析,而读取 properties 配 ...

  3. 基于MVC设计模式的Web应用框架：struts2的简单搭建（一）

    Struts2的初步介绍 Struts2是apache项目下的一个web 框架,普遍应用于阿里巴巴.京东等互联网.政府.企业门户网站.虽然之前存在了很大的安全漏洞,在2013年让苹果.中国移动.中国联 ...

  4. JS组件系列——Gojs组件，前端图形化插件之利器

    前言:之前分享过两篇关于流程画图的前端组件,使用的jsPlumb.这个组件本身还不错,使用方便.入门简单.轻量级,但是使用一段时间下来,发现一些弊病,比如组件不太稳定,初始进入页面的时候连线的样式有时 ...

  5. 「JavaScript」手起刀落-一起来写经典的贪吃蛇游戏

    回味 小时候玩的经典贪吃蛇游戏我们印象仍然深刻,谋划了几天,小时候喜欢玩的游戏,长大了终于有能力把他做出来(从来都没有通关过,不知道自己写的程序,是不是能通关了...),好了,闲话不多谈,先来看一下效 ...

  6. java.lang.ClassCastException: com.sun.proxy.$Proxy2 cannot be cast to...异常

    异常: Exception in thread "main" java.lang.ClassCastException: com.sun.proxy.$Proxy2 cannot ...

  7. Python3_打开和运行方式

    蹬蹬蹬--第一次写博客,如有错误欢迎指正. Python很火,前几天也是因为需要装了一下,但是并没有用它,今天打开准备刚准备试下,才发现自己对这个软件一无所知,百度了一些资料发现并不能用才知道pyth ...

  8. JavaScript内置的预定义函数

    javascript引擎中有一组可供随时调用的内建函数.这些内建函数包括 parseInt()  将收到的任何输入值转换成整数类型输出,如果转换失败,返回NaN parseFloat() 功能基本与p ...

  9. 简介CentOS与 Ubuntu的不同

    1.关于登录用户 centos可以使用root登录  ubuntu不能使用root登录 centos普通用户默认不能通过sudo取得root权限执行命令, ubuntu可以,centos需要sudo时 ...

  10. 基于Spring Aop实现类似shiro的简单权限校验功能

    在我们的web开发过程中,经常需要用到功能权限校验,验证用户是否有某个角色或者权限,目前有很多框架,如Shiro Shiro有基于自定义登录界面的版本,也有基于CAS登录的版本,目前我们的系统是基于C ...