vue中keepAlive的用法[返回页面不刷新]

使用vue单页开发项目时遇到一个问题:在列表页进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用<keep-alive>解决这个问题,下面是我的使用心得。

<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。

1.在app.vue页面中把<router-view>替换成下图所示:

2.在router中的index.js中,路由配置下加一个meta属性:

我的需求是,列表页面到列表详情页跳转后,从详情页回来之后,列表页面不刷新

注意:哪个页面需要缓存,哪个页面加上就行,不需要的不用写

3.在列表详情页,加入下图所示内容:

注意:下面内容加上之后,想要的效果是实现了,但是出现另一个问题,就是无论哪个页面跳到这个列表页面,都不会刷新,显然和所要求的不同。所以需要第四步:

4.在列表页加入如下图所示:

需要判断下,如果页面来源是详情页的话,就缓存,

否则,就不缓存,刷新。


beforeRouterLeave必须写在有配置路由的页面上才有效的。具体使用方法,可以参考官方文档。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容