vue3+router4 keepalive缓存页面

需求

在列表页面上点击查看详情，跳转到一个新的页面，然后返回的时候想返回到跳转时候的页面。

实现思路

1.vuex中存在一个保存需要缓存的页面name值，当页面跳转j进来的时候执行beforeRouteEnter中往vuex中存储这个值，当页面离开的时候也就是beforeRouteLeave中判断你进入的页面是不是详情页，如果是则保留vuex中的值，如果不是则清空值。
2.还存在一种情况就是，我从列表页跳到了详情页，此时vuex中存在了这个值，但是我从详情页去另一个页面而没有回到列表页，这个时候我们就需要去清空vuex中的这个值了。
3.keepalive需要用到动态组件include去判断加载情况

具体代码如下

新建routerCache.js文件用来存储值

// 记录缓存的路由

export const routerCache = {
  state: {
    KEEP_ALIVE_COMS: []
  },
  mutations: {
    // 添加缓存组件
    ADD_KEEP_ALIVE_COM(state, name) {
      if (!state.KEEP_ALIVE_COMS.includes(name)) {
        state.KEEP_ALIVE_COMS.push(name)
      }
    },

    // 删除缓存组件
    REMOVE_KEEP_ALIVE_COM(state, name) {
      if (state.KEEP_ALIVE_COMS.includes(name)) {
        state.KEEP_ALIVE_COMS = state.KEEP_ALIVE_COMS.filter(item => item !== name)
      }
      // state.KEEP_ALIVE_COMS.pop()
    },

    // 重置缓存组件
    RESET_KEEP_ALIVE_COM(state) {
      state.KEEP_ALIVE_COMS = []
    }
  },
}

vuex中引入这个模块

import {
    createStore
} from 'vuex'
import {
    routerCache
} from './routerCache';
const store = createStore({
    state() {
        return {}
    },
    mutations: {},
    modules: {
        routerCache: routerCache,
    }
})

export default store;

app.vue

<template>
    <router-view v-slot="{ Component }">
      <keep-alive :include="getKeepAliveComs">
        <component :is="Component" />
      </keep-alive>
    </router-view>
</template>
<script>
import { useStore } from 'vuex';
import { computed } from 'vue';
export default {
  name: 'App',
  setup() {
    const store = useStore();
    const getKeepAliveComs = computed(() => {
      return store.state.routerCache.KEEP_ALIVE_COMS;
    });
    return {
      getKeepAliveComs
    };
  }
};
</script>

列表页使用

//这个很重要，因为beforeRouteEnter的时候还没有store
import store from '@/commons/store';
beforeRouteEnter(to, from, next) {
    // 进来的时候添加缓存组件 name
    // 此时不能使用this.$store.commit 因为组件还没有被创建所以不能使用this
    store.commit('ADD_KEEP_ALIVE_COM', '缓存组件 name');
    console.log(store);
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 离开的时候，非以下页面则删除缓存组件 name
    // 记录路由处的name值 (去往录入和pdf展示页面需要添加缓存)
    let coms = ['非以下页面则删除缓存组件 name'];
    console.log(coms.indexOf(to.name) === -1, to.name);
    if (coms.indexOf(to.name) === -1) {
      store.commit('REMOVE_KEEP_ALIVE_COM', '缓存组件 name');
    }
    next();
  }

详情页使用

import store from '@/commons/store';
 beforeRouteLeave(to, from, next) {
    // 离开的时候，非以下页面则删除缓存组件 name
    // 记录路由处的name值 (去往录入和pdf展示页面需要添加缓存)
    let coms = ['列表页 name'];
    console.log(coms.indexOf(to.name) === -1, to.name);
    if (coms.indexOf(to.name) === -1) {
      store.commit('REMOVE_KEEP_ALIVE_COM', '缓存组件 name');
    }
    next();
  }