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


  • 精彩推荐

  • 2019-12-06 13:26:30

    vue的mixins混入合并规则

    混入minxins：分发vue组件中可复用功能的灵活方式。混入对象可以包含任意组件选项。组件使用混入对象时，所有混入对象的选项将混入该组件本身的选项。

  • 2019-12-06 16:50:34

    Intellij idea 如何关闭无用的提示

    Linux：Settings —> Editor —> Inspections —> General —> Duplicated Code Mac：Preferences --> Editor —> Inspections —> General —> Duplicated Code fragment 将对应的勾去掉。

  • 2019-12-09 15:36:56

    神秘的 shadow-dom 浅析，shadow-root

    顾名思义， shadow-dom，直译的话就是 影子dom ？我觉得可以理解为潜藏在黑暗中的 DOM 结构，也就是我们无法直接控制操纵的 DOM 结构。前端同学经常用开发者工具的话，查看 DOM 结构的时候，肯定看到过下面这样的结构：

  • 2019-12-10 11:13:50

    前端实战-基于Nuxt的SVG使用

    虽然我们在日常开发的时候，在使用iview 或者element ui等组件时，通常会包含一些常用icon；但是在面对一些特定的需求时，或者自己想high一下，这些通用的icon并不能很好的满足我们。这个时候我们可能会拿到一些SVG适量图，但是怎么去使用这些矢量图呢。

  • 2019-12-10 11:15:08

    用CSS给SVG 的内容添加样式

    SVG图形的一个最常见用例是图标系统，其中最常用的SVG sprite技术就是使用SVG<use> 元素在文档中任意位置“实例化”图标。 使用<use>元素实例化图标或任何其它的SVG元素或图像，给元素添加样式时经常会碰到一些问题。这篇文章的目的是尽可能给你介绍一些方法来解决：使用<use>引入的内容添加样式受限的问题。 但是在开始之前，我们先快速浏览一下SVG的主要结构和分组元素，然后慢慢进入use的世界中，以及shadow DOM，然后重回CSS的怀抱。我们会逐步讲解为什么给<use>内容添加样式会比较麻烦，以及有什么好的解决方案。

  • 2019-12-10 16:21:05

    display:flex的子元素无法设置宽度

    子元素有个flex-shrink属性，表示在父元素宽度不够的情况下是自动收缩不？0表示不自动收缩，1表示自动收缩；所以将子元素（图片）添加属性：flex-shrink:0;即

  • 2019-12-10 21:14:11

    axios文件上传功能+formData

    在项目中使用axios上传文件，记得new一个纯净的axios或者考虑用ajax请求。因为axios在项目估计已经用了全局配置请求头等信息，这里的配置可能被全局请求头拦截，导致请求失败。 2.1构造formData 作者：exmexm 链接：https://www.jianshu.com/p/9c708a47d8a5 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。