vue3+ts 路由 动态keep-alive 缓存

在 Vue 3 中使用 TypeScript 和路由结合动态 keep-alive 缓存，你可以使用 Vue Router 和 `<keep-alive>` 组件来实现。

首先，确保你已经安装了 Vue Router 和 Vue 3 的相关依赖。然后，在路由配置中添加 `meta` 字段来指定需要缓存的组件。

// router.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
    meta: {
      keepAlive: true // 将需要缓存的组件设置为 true
    }
  },
  // 其他路由配置...
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

接下来，在根组件中使用 `<router-view>` 和 `<keep-alive>` 组件来实现动态缓存。

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

<script>
import { onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    // 监听路由变化，判断是否需要缓存组件
    watch(
      () => router.currentRoute.value,
      (to, from) => {
        if (to.meta.keepAlive && from.meta.keepAlive) {
          // 如果前后两个路由都需要缓存，则手动触发组件的生命周期钩子
          const component = router.currentRoute.value.matched[0].components.default;
          component.__vccOpts && component.__vccOpts.activated && component.__vccOpts.activated();
        }
      }
    );

    // 在初次加载时手动触发根组件的生命周期钩子
    onMounted(() => {
      const component = router.currentRoute.value.matched[0].components.default;
      component.__vccOpts && component.__vccOpts.activated && component.__vccOpts.activated();
    });
  }
};
</script>

在上面的示例中，我们在路由配置中将需要缓存的组件的 `meta.keepAlive` 设置为 `true`。然后，在根组件中使用 `<router-view>` 来渲染当前路由匹配的组件，并将其包裹在 `<keep-alive>` 组件中。

通过监听路由变化，我们可以判断前后两个路由是否都需要缓存。如果是，则手动触发组件的 `activated` 生命周期钩子，以确保组件被正确缓存和激活。

请注意，这里我们使用了 Vue 3 的 Composition API 来编写逻辑。确保你的项目已经配置了相关依赖并支持 Composition API。

希望这个示例对你有帮助！