vue中使用keepAlive组件缓存遇到的坑

2019-12-14 20:58:46

参考地址 vue中使用keepAlive组件缓存遇到的坑

项目开发中在用户由分类页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页面。 

 

 

至此终于解决了这个问题。

 

网友提供了其他的解决方案可以参考下,

https://www.jianshu.com/p/cd1baf5b03b0

也可以参考github上关于keep-alive缓存相关的问。

https://github.com/vuejs/vue-router/issues/811#issuecomment-353875880


  • 2020-01-03 00:36:00

    break和continue详解for循环

    1. break:直接跳出当前循环体(while、for、do while)或程序块(switch)。其中switch case执行时,一定会先进行匹配,匹配成功返回当前case的值,再根据是否有break,判断是否继续输出,或是跳出判断(可参考switch的介绍)。 2. continue:不再执行循环体中continue语句之后的代码,直接进行下一次循环。

  • 2020-01-04 08:14:56

    input上传图片,获取图片上传尺寸

    onchange触发,获取当前file对象(这里可以获取图片的大小、类型、修改时间等) reader去读取文件 塞到页面,获取图片的宽高 移出图片节点

  • 2020-01-04 08:19:28

    flex 布局子内容p元素被撑开

    父元素 flex 布局,子元素有一行文字,将其设置为不换行隐藏后显示省略号,但实际并不是想象的那样,而导致布局变形。改怎么办?

  • 2020-01-04 18:44:26

    vue中computed源码,工作原理

    (Obeject.defineProperty是Object的一个方法,第一个参数是对象名称,第二个参数是要设置的属性名,第三个参数是一个对象,它可以设置这个属性是否可修改、可写等,而这篇文章主要使用的是Obeject.defineProperty的访问器属性,感兴趣的朋友可以自行google或者查看Js高及程序设计)