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);
      }
    }
  }
}