VUE2
vue版本^2.6.11
1.App页面
<template>
<div id="app">
<keep-alive :include="aliveList">
<router-view />
</keep-alive>
</div>
</template>
<script>
import store from './store';
export default {
name: 'App',
computed: {
aliveList() {
return store.aliveList;
}
},
}
</script>
2.列表页面
<script>
export default {
name:'List', // include缓存要加name
activated() {
const scrollTop = this.$route.meta.scrollTop;
const ele = document.querySelector('#main-body');
if (scrollTop) {
ele.scrollTop = scrollTop;
}
},
async beforeRouteLeave(to, from, next) {
const ele = document.querySelector('#main-body');
const scrollTop = ele ? ele.scrollTop : 0;
from.meta.scrollTop = scrollTop;
await Promise.resolve(
setAlive('List', to.name === 'Detail' ? 'ADD' : 'DELETE')
);
next();
}
}
</script>
3.store.js
const state = Vue.observable({
aliveList:[]
}),
export const mutations = {
setAlive(name, type) {
if (type === 'ADD') {
const list = [...state.aliveList].concat(name);
state.aliveList = [...new Set(list)];
} else {
const index = state.aliveList.indexOf(name);
if (index !== -1) {
state.aliveList.splice(index, 1);
}
}
}
}