使用vue单页开发项目时遇到一个问题:在列表页进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用<keep-alive>解决这个问题,下面是我的使用心得。
<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
1.在app.vue页面中把<router-view>替换成下图所示:
2.在router中的index.js中,路由配置下加一个meta属性:
我的需求是,列表页面到列表详情页跳转后,从详情页回来之后,列表页面不刷新
注意:哪个页面需要缓存,哪个页面加上就行,不需要的不用写
3.在列表详情页,加入下图所示内容:
注意:下面内容加上之后,想要的效果是实现了,但是出现另一个问题,就是无论哪个页面跳到这个列表页面,都不会刷新,显然和所要求的不同。所以需要第四步:
4.在列表页加入如下图所示:
需要判断下,如果页面来源是详情页的话,就缓存,
否则,就不缓存,刷新。
beforeRouterLeave必须写在有配置路由的页面上才有效的。具体使用方法,可以参考官方文档。