vue3+ts项目使用keep-alive缓存组件实例，每个组件传递参数不同

在Vue3项目中，结合TypeScript (TS)，如果你想利用`keep-alive`特性来缓存页面并复用已经创建的组件实例，特别是在路由跳转时传递不同参数的情况下，你可以这样做：

1. 安装和配置KeepAlive：
首先，你需要安装Vue Router插件，它内置了对`<keep-alive>`的支持。在`main.ts`或其他合适的入口文件里，安装`vue-router`和`vue-router保活插件`，如`vue-router-preserve-query`。

   npm install @vue/router vue-router-preserve-query

2. 使用KeepAlive和动态路由守卫：
在你的`router/index.ts`或相应配置文件中，配置`<keep-alive>`包裹需要缓存的组件，并使用动态路由守卫（如`beforeRouteUpdate`）来处理参数变化。

   import { createRouter, createWebHistory } from 'vue-router';
   import preservedQuery from 'vue-router-preserve-query';

   // ...其他路由配置

   const router = createRouter({
     history: createWebHistory(process.env.BASE_URL),
     routes,
     <--- 插入 keep-alive 和 preserveQuery -->
     scrollBehavior: () => ({ y: 0 }),
     plugins: [preservedQuery],
   });

   // ...路由守卫
   router.beforeEach((to, from, next) => {
     if (to.meta.preserve) { // 检查是否需要缓存
       router.app.$routeMeta.preserveQuery(to.query); // 存储当前查询参数
     }
     next();
   });
   
   router.afterEach((to, from) => {
     // 在每次切换路由后，检查之前存储的查询参数
     if (from.meta.preserveQuery) {
       to.query = from.meta.preserveQuery; // 设置新路由的目标参数
     }
   });

3. 组件内处理参数：
   在被缓存的组件中，你可以接收和处理从父路由传来的参数，通常在`setup()`或`created()`生命周期钩子中。

import { defineComponent, ref } from 'vue';

export default defineComponent({
setup(props) {
const queryParams = ref(props.query || {}); // 获取并管理来自父路由的参数

onMounted(() => {
// 在组件挂载时，可以根据参数做初始化
});

return {
queryParams
};
},
});