vue3实现路由缓存

需求：
假设有home、B、C、D四个页面。当B跳转至C时，缓存B页面；B跳转至D、home两个页面时，不需要缓存B页面。

实现思路：
当从其他页面进入B页面时，将B页面添加到缓存区（可用数组存储），此时B页面就是一个keep-alive的状态；当离开B页面，去到其他页面时，将B页面从缓存区清除（去到C页面不清除，因为需求时B->C时，缓存B）；整个流程使用vuex来控制缓存区数据。

主要代码：
app.vue

<template>
    <router-view v-slot="{ Component, route }">
      <keep-alive :include="store.state.cacheKeepAlive">
        <component :is="Component" />
      </keep-alive>
    </router-view>
</template>

必要说明：include属性匹配的是组件里的name

router.js

const router = createRouter({
  history:createWebHashHistory(),
  routes:route
})
router.beforeEach((to,from,next)=>{
  if(to.name==='B'){
    //不管从哪个页面来，只要是去到B页面，都将B页面添加到缓存区
    store.commit('setKeepAlive','B')
  }
  if(from.name==='B'&&to.name!=='C'){
    //离开B页面并且不是跳转到C页面，就将B页面从缓存区清除掉
    store.commit('removeKeepAlive','B')
  }
  next()//路由放行
})

说明：本人的思路是将控制缓存的逻辑写在router.js里，这样方便管理，大家可以根据自己的业务逻辑进行相应修改，主要是操作添加和清除路由缓存

store.js

import { createStore } from 'vuex'
export default createStore({
  state: {
    cacheKeepAlive:[]
  },
  mutations: {
    setKeepAlive(state, payload) {
      if(!state.cacheKeepAlive.includes(payload)){
      	//payload是需要缓存的页面（B）
      	//缓存过了就不用添加了
        state.cacheKeepAlive.push(payload)
      }
    },
    removeKeepAlive(state, payload){
      //payload是要移除的缓存页（B）
      state.cacheKeepAlive=state.cacheKeepAlive.filter(item=>item!==payload)
      console.log(state,'state');
    }
  },
})

总结：
结合以上几步基本上能够实现上面的需求（亲测有效），vue3的路由缓存和vue2有一点区别。但是本人在实现这个需求的时候发现了一个问题：当将B页面从缓存区移除掉时，B页面的onUnmouted事件（也就是页面销毁事件）没有执行 ，但是当再次进入B页面时，onMounted事件是会执行的，那就是说明B页面确实是被销毁了。那为什么会出现这种情况呢？欢迎评论区解答