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

使用vue单页开发项目时遇到一个问题：在列表页进入介绍页，按返回键返回列表页时页面刷新了，客户体验非常差啊！！！查阅了一下相关问题，使用<keep-alive>处理这个问题，下面是我的使用心得。

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

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

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

我的需求是，列表页面到列表介绍页跳转后，从介绍页回来之后，列表页面不刷新

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

3.在列表介绍页，加入下图所示内容：

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

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

需要判断下，假如页面来源是介绍页的话，就缓存，

否则，就不缓存，刷新。

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