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-17 15:28:24

    深入理解vue中的slot与slot-scope

    vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率、使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经可以写基础组件了”,于是就关闭了vue说明文档。

  • 2020-01-17 21:20:06

    Nuxt重要点介绍和记录

    nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用Vue开发多页应用,并在服务端完成渲染,可以直接用命令把我们制作的vue项目生成为静态html。

  • 2020-01-17 21:21:42

    nuxtjs打包优化

    然后你再使用 npm run build 打包的时候,会弹出一个界面 当然了,它第一次出来的时候我立马关了,这啥玩意???别着急你慢慢的品,慢慢的看。 原来 这是打包后的JS,面积的大小就是体积的大小。这样我们一目了然的看到了到底那里大了

  • 2020-01-17 23:21:54

    webpack打包优化之外部扩展externals的实际应用

    使用vue-cli创建项目,使用webpack打包。其中,有一个webpack优化webpack.optimize.CommonsChunkPlugin,它会将node_modules中的必需模块提取到vendor文件中,项目开发中,增加第三方模块,比如element-ui、vue-echarts等,vendor的包都会增大。这个时候,就需要考虑减轻vendor包的大小,增加构建速度。我们可以使用webpack的外部扩展(externals)功能。

  • 2020-01-18 01:26:59

    anyProxy使用注意事项

    anyproxy-ca 运行这个命令,如果是mac电脑他会提醒你去通过证书。

  • 2020-01-18 08:54:06

    利用localStorage来处理你的Javascript脚本错误

    localStorage作为HTML5中的新特性,它的出现可以说对于前端性能体验来讲可以获得相当大的改善。存储一些用户经常用到而又不是涉及隐私和安全的东西,的确是一个非常好的选择。下面分享一下用localStorage来处理客户端代码错误的例子来了解一下它的用途吧。