说明
. keep-alive
实现
结合router实现部分页面缓存
<keep-alive>
<router-view v-if="$route.meta && $route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!($route.meta && $route.meta.keepAlive)"></router-view>
{
name: 'onePage', // onePage
path: 'onePage',
component: onePage,
meta: {
requiresAuth: true,
keepAlive: true,
child: ['/onePage/detail']
}
}
beforeRouteLeave(to, from, next) {
let child = from.meta && from.meta.child || []
if (child.indexOf(to.path) === -1) {
// 非子页面
this.initData() // 清除data中相关数据
from.meta.keepAlive = false
} else {
// 子页面
from.meta.keepAlive = true
}
next()
},
activated () {
// 更新查询列表数据
this.getList()
},
beforeRouteLeave (to, from, next) {
// 设置下一个页面的路由,让其列表搜索条件缓存
if (to.meta) {
to.meta.keepAlive = true;
next();
}
}