在开发中,不可避免,有些时候会需要保存页面状态,比如列表到详情,从详情返回时,比如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;
}
}