vue keep-alive保持页面状态

在开发中，不可避免，有些时候会需要保存页面状态，比如列表到详情，从详情返回时，比如tab列表切换时，等等，

这时就要用到keep-alive：

上代码：

现在

{
    path: 'XX/XX',
    component: () => import('XX/XX'),
    meta: {
      title: 'XXXX',
      keepAlive: true // 需要被缓存
    }
  },

配合路由 

<transition name="el-fade-in" mode="out-in">
   <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
   </keep-alive>
</transition>
<transition name="el-fade-in" mode="out-in">
    <router-view v-if="!$route.meta.keepAlive"></router-view>
</transition>

不过，有时候又需要刷新，怎么办呢，在路由守卫里判断,修改列表页的meta值，false，进入页面会重新请求数据。

    beforeRouteLeave(to, from, next) {
    	if (to.path == "/XXX") {
        	to.meta.keepAlive = true;
      	} else {
        	to.meta.keepAlive = false;
      	}
    }