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

使用vue单页开发项目时遇到一个问题：在列表页进入详情页，按返回键返回列表页时页面刷新了，用户体验非常差啊！！！查阅了一下相关问题，使用解决这个问题，下面是我的使用心得。
是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
1.在app.vue页面中把替换成下图所示：

<keep-alive>
<router-view v-if="$route.meta.keepLive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepLive"></router-view>

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

{
path: '/',
component: () => import(/* webpackChunkName: 'day-report' */ './views/index.vue'),
meta: {
keepLive: !0
}
},

我的需求是，列表页面到列表详情页跳转后，从详情页回来之后，列表页面不刷新
注意：哪个页面需要缓存，哪个页面加上就行，不需要的不用写
3.在列表详情页，加入下图所示内容：
注意：下面内容加上之后，想要的效果是实现了，但是出现另一个问题，就是无论哪个页面跳到这个列表页面，都不会刷新，显然和所要求的不同。所以需要第四步：

beforeRouteLeave(to, from, next) {
if (to.path === '/') {
if (!from.meta.keepLive) {
from.meta.keepLive = !0;
}
} else {
from.meta.keepLive = !1;
to.meta.keepLive = !1;
this.$destroy();
}
next();
},

4.在列表页加入如下图所示：
需要判断下，如果页面来源是详情页的话，就缓存，
否则，就不缓存，刷新。

beforeRouteLeave(to, from, next) {
if (to.path === '/day') {
from.meta.keepLive = !0;
} else {
from.meta.keepLive = !1;
this.$destroy();
}
next();
},

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