使用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时页面的状态保存，其他情况下不保存状态。
然后就是给我们路由设置keepAlive属性值，比如我是给主页（列表页）的路由设置了keepAlive属性为true。
{
path: 'list, //集散点选点仿真输入
name: 'List',
component: List,
meta: {
requiresAuth: true,
privilege: ['capacityStatus'],
keepAlive: true,//此组件需要被缓存
isBack:false, //用于判断上一个页面是哪个
}
},
{
path: 'listDetail', //集散点选点仿真输入编辑（调整机构关系）
name: 'ListDetail',
component: ListDetail,
meta: {
requiresAuth: true,
privilege: ['capacityStatus'],
}
},
这样设置了之后，List页的状态就会保存，返回键返回到List时页面不会刷新请求数据了。
但是有问题啊！！！从List列表页跳到任何页面，再返回List列表页都不会刷新页面！这并不是我想要的，我只要从ListDetail详情页返回列表页时不刷新页面，其他情况下是需要刷新的。所以还需要加一些处理，思路就是从List列表页跳转到其他页面时把主页的keepAlive值设置为false，从ListDetail详情页返回List列表页时把List列表页的keepAlive值设置为true就好了，代码如下：
List跳转到其他页面时把List的keepAlive值设置为false
在List列表页加上如下代码：
beforeRouteEnter(to, from, next) {
if(from.name=='ListDetail'){
to.meta.isBack=true;
}
next();
},
activated() {
if(this.$route.meta.isBack){
// 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
let formDataStorage=JSON.parse(localStorage.getItem('formDataStorage'))
this.formData.hubHandleTime= formDataStorage.hubHandleTime
this.formData.hubOrgInfoId= formDataStorage.hubOrgInfoId
this.formData.hubDeptMutualId= formDataStorage.hubDeptMutualId
}
// 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
this.$route.meta.isBack=false
},
钩子函数的执行顺序
不使用keep-alive
beforeRouteEnter --> created --> mounted --> destroyed
使用keep-alive
beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存的页面，只会触发beforeRouteEnter -->activated --> deactivated 。created和mounted不会再执行。我们可以利用不同的钩子函数，做不同的事。务必理解上述钩子函数的执行时机和执行顺序。
activated和deactivated是使用keep-alive后，vue中比较重要的两个钩子函数，建议详细了解下。
