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