项目开发中在用户由分类页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. 在moba游戏里面模拟实现绝地求生毒雾圈功能

    ---恢复内容开始--- 已经有很长一段时间没做项目了上半年大多数时间都荒废在王者荣耀,哈哈,S8赛季也上了王者,美滋滋 转回正题,公司需要开个新项目,需要把原有的moba游戏,改成类似绝地求生那玩法 ...

  2. Python 标准库 urllib2 的使用细节（转）

    http://www.cnblogs.com/yuxc/archive/2011/08/01/2123995.html http://blog.csdn.net/wklken/article/deta ...

  3. python操作Mysql基础

    import pymysql #不修改数据 def no_data_change(): db=pymysql.connect('host','user','pw','db_name') #host,u ...

  4. Java Web基础入门

    前言 语言都是相通的,只要搞清楚概念后就可以编写代码了.而概念是需要学习成本的. Java基础 不用看<编程思想>,基础语法看 http://www.runoob.com/java/jav ...

  5. SQL Server 的常见约束

    1.主键约束------我是最常见的哦(PRIMARY KEY) 限制:不能为空,数据唯一,一个表中只有一个 方法: 建表时直接在列类型后面添加   如: CREATE TABLE stuDB ( S ...

  6. Python 动态添加类方法

    习题: 1. Shape基类,要求所有子类都必须提供面积的计算,子类有三角形.矩形.圆. 2. 上题圆类的数据可序列化 第一种方法:使用Mixin多继承组合的方式,混入其它类的属性和方法 第二种方法: ...

  7. postgresql的psql常用命令-4

    psql是PostgreSQL的一个命令行交互式客户端工具 1. 查看postgresql账号 [root@localhost ~]#cat /etc/passwdroot:x:0:0:root:/r ...

  8. tpshop使用自带极光推送

    推送逻辑在common里面的PushLogic.php;在后台网站->商城设置->推送设置,将极光的ID,密码填一下系统会自动加入数据库里面. 在你所需推送的PHP类里面引用这个文件即可. ...

  9. Winform远程更新代码

    本软件具备以下形: 1.通过http形式在客户端更新winform代码文件 2.在服务端通过软件生成xml配置文件,客户端通过比对xml配置文件来更新代码文件. 服务端: 在服务器上建立一个IIS发布 ...

  10. Mina自定义协议简单实现

    因公司需要做个电子秤自动称重系统,需要自定义协议实现,所以就用Mina简单实现了一下,有时间改成Netty版 服务端 package net.heartma.server;import java.io ...