关于vue中列表与详情页跳转过程中列表页正确的缓存的处理方法

这里拿三个页面来表现主要的功能流程，首页、列表页、详情页。从列表页跳转到详情页，列表页存在一些状态比如往下滑了很多、比如切换到另一种状态的选项卡下，这时候希望列表页能够缓存下来，从详情页返回到列表页，看到还是进入详情页之前的位置，还是之前切换的选项卡。从首页到列表页，这些状态又会刷新，重新加载数据。

首先需要在vuex里面创建一个状态，动态保存被缓存的页面。

export default createStore({
    state: {
        KeepAlive: [], // 需要缓存的页面
    },
    mutations: {
        setKeepAlive(state, data){
          state.KeepAlive = data;
        }
    }
)}

接着就是在需要缓存的列表里面写上控制缓存的逻辑，主要就是两个路由导航。 首先需要添加当前页面缓存，这一步需要在beforeRouteEnter中判断是否添加。

beforeRouteEnter(to, from, next){
    next(vm => {
        if(from.path == '/home'){ // 只有从首页进来列表页才添加
            let keepalive = vm.$store.state.KeepAlive;
            if(!keepalive.includes('list')){
                keepalive.push('list')
            }
            vm.$store.commit('setKeepAlive', keepalive);
        }
    })
}

然后就是需要在合适的时候去掉页面缓存，这些判断逻辑需要在onBeforeRouteLeave中。

const vuex = useStore();

onBeforeRouteLeave((to) => {
    if(to.path == '/home'){ // 页面离开并且是到首页  则去除列表页的缓存
        const keepalive = vuex.state.KeepAlive.filter(item => item != 'list');
        vuex.commit('setKeepAlive', keepalive);
    }
});

基本上这样就能实现列表的缓存 如果列表中存在某些数据状态可以在详情页改变，可以使用onActivated生命周期。需要注意的是

<router-view v-slot="{ Component }">
    <!-- KeepAlive必须为用 , 连接的字符串，才可以触发onActivated -->
    <keep-alive :include="KeepAlive">
        <component :is="Component" />
    </keep-alive>
</router-view>