解决Vue单页使用keep-alive页面返回不刷新的问题

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

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

首先在App.vue页面上有下面一段代码，我们都知道这是页面渲染的地方

<router-view></router-view> 

把这段代码改成如下：

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

我们能看到这段代码做的逻辑判断，当路由的meta属性的keepAlive属性值为true