Vue3动态组件与异步加载如何优雅结合？一个标签页缓存方案

后台管理系统里，标签页加动态组件几乎是标配：用户点一个菜单，开一个标签，切来切去还要保留表单、滚动位置和筛选条件。直觉写法通常是把路由对应的组件用 `<component :is="..." />` 渲染出来，再套一层 `<KeepAlive>`。但真正做起来，异步加载和缓存经常打架：组件每次切换都重新请求、`include` 不生效、关闭标签后状态还留着。问题不在 API，而在组件的“身份”和缓存生命周期没有对齐。

动态组件加 KeepAlive，为什么容易翻车

最常见的写法是在模板里直接调用异步组件工厂：

<component :is="defineAsyncComponent(() => import('./UserList.vue'))" />

这行代码每次渲染都会创建一个新的异步组件包装器。对 Vue 来说，它看起来像新组件，`KeepAlive` 自然很难稳定复用，严重时还会重复触发 `import()`。另一个坑是 `KeepAlive` 的 `include` 匹配的是组件 `name`，而 `defineAsyncComponent` 返回的包装器默认名字并不一定等于你期望的业务组件名。名字对不上，缓存就不会按预期生效。

把异步组件收进注册表

更优雅的做法是提前建立视图注册表，让每个异步组件只创建一次。以 Vite 为例：

```ts
import { defineAsyncComponent, type Component } from 'vue'

const modules = import.meta.glob('@/views/**/*.vue')

function createAsyncComponent(name: string, loader: () => Promise<any>) {
const comp = defineAsyncComponent(loader)
;(comp as any).name = name
return comp
}

export const viewMap = new Map<string, Component>()

for (const [path, loader] of