项目需求
- Vue项目 列表数据跳转到详情界面,从详情界面返回时列表数据保持,从其他地方进入列表时,列表会重新渲染
具体修改
- 在路由文件中选择你将要保活的页面
– 例如(在meta中加入keepAlive:true)
{
path: '/redeemlist',
component: redeemlist,
name: 'redeemlist',
meta: {
title: '',
keepAlive: true,
}
<!-- 可以被缓存的视图组件 -->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 不可以被缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive"></router-view>
- 在需要缓存的界面(name:redeemlist)
beforeRouteLeave(to, from, next) {
if (to.name === "redeemDetails") {
from.meta.keepAlive = true;
from.meta.savedPosition = this.$refs.success.scrollTop;
} else {
keepAlive(this);
}
next();
},
watch: {
$route(to, from) {
// 对路由变化作出响应…
// debugger;
if (from.name === "redeemStatus" && to.name === "mine" || from.name === "redeemDetails" && to.name === "mine" ) {
keepAlive(this);
}
},
},
beforeRouteLeave(to, from, next) {
if (to.path == "/redeemlist") {
to.meta.keepAlive = true;
}
this.$nextTick(() =>{
next();
})
},
export default function keepAlive(vm) {
if (vm.$vnode && vm.$vnode.data.keepAlive) {
if (
vm.$vnode.parent &&
vm.$vnode.parent.componentInstance &&
vm.$vnode.parent.componentInstance.cache
) {
if (vm.$vnode.componentOptions) {
const key =
vm.$vnode.key == null
? vm.$vnode.componentOptions.Ctor.cid +
(vm.$vnode.componentOptions.tag
? `::${vm.$vnode.componentOptions.tag}`
: "")
: vm.$vnode.key;
const cache = vm.$vnode.parent.componentInstance.cache;
const keys = vm.$vnode.parent.componentInstance.keys;
if (cache[key]) {
if (keys.length) {
const index = keys.indexOf(key);
if (index > -1) {
keys.splice(index, 1);
}
}
delete cache[key];
}
}
}
}
}
- 完结
- 希望大家支持一下我的公众号