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