Vue3移动端的路由动态缓存之keep-alive的使用

我所碰到的问题是，从不同路由跳转至同一路由时动态更改该目标路由所绑定的组件的缓存状态

在app.vue文件中添加下列代码

<router-view v-slot="{ Component }">
   <keep-alive :include="keepAliveList">
       <component :is="Component" />
   </keep-alive>
</router-view>

let store = useStore();

let keepAliveList = computed(() => store.state.keepAliveList);

这里默认大家已经掌握了全局路由守卫和vuex或者pinia全局状态管理的用法。

其中store中的keepAliveList 中保存的是要缓存的组件名称。

可以在路由的全局前置首位函数中根据from.path 来源的路径来动态改变store中的keepAliveList数组中保存的要缓存的组件名称。这样就可以达到根据不同来源路由的路径控制要跳转的目标路由绑定的组件是否缓存的功能。