每个人都可以，
拥有SSL证书

有个后台项目用 el-tabs 做了标签页，每个标签页里嵌套 router-view，想靠 keep-alive 把切出去的页面缓存下来。上线没多久就发现不对——每次切标签，组件就跟新打开一样，表单、滚动条全都重置了。

原来的代码大概是这个样子：

<template>
  <div class="app-container">
    <el-tabs v-if="showTabs" v-model="activeTab" type="card" closable>
      <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.meta?.title || tab.name" :name="tab.name">
        <router-view v-slot="{ Component }">
          <keep-alive :include="cachedViews">
            <component :is="Component" :key="tab.name" />
          </keep-alive>
        </router-view>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

cachedViews 这个计算属性是从 tabs 里筛出需要缓存的页面，然后返回路由名称数组：

const cachedViews = computed(() => {
  return tabs.value
    .filter(tab => tab.meta?.cache)
    .map(tab => tab.name)
    .filter(name => name)
})

我一开始也以为是 include 没匹配上，查了一阵发现不止这一个问题。

keep-alive 的 include 是拿组件的 name 选项去比的，不是路由 name。而 cachedViews 里放的全是路由 name，如果这两个名字不一样，缓存根本不会生效。

这算一个坑。

另一个更隐蔽的坑在 key 上。动态组件那里绑了 :key="tab.name"。大多数时候这个没问题，但如果两个不同的标签页恰好用了同一个组件（比如都是列表页，只是参数不同），同一个组件却配上不同的 key，Vue 会把它们当成两个完全独立的实例。keep-alive 想根据 include 匹配组件名来缓存，结果发现 key 对不上，缓存就被绕过去了，每次都是销毁重建。

切换的时候状态当然就丢了。

线上跑了段时间才发现，几个类似结构的页面都受这个影响，用户老抱怨要反复填查询条件。

怎么修？我试了三种方式，项目里最终用的第一种。

最简单直接的办法是把路由 name 和组件 name 统一。路由配置里写：

{
  path: '/dashboard',
  name: 'Dashboard',
  component: () => import('@/views/Dashboard.vue'),
  meta: { cache: true }
}

组件里也显式声明 name：

export default {
  name: 'Dashboard',
  // ...
}

这样 cachedViews 返回的路由名称数组，就刚好可以和组件 name 对得上，include 能正常工作。把之前那个 :key="tab.name" 去掉，或者改成全路径加参数的组合，避免相同组件被当成不同实例。

如果不想大动组件里的 name，也可以改 cachedViews 计算，让它直接找出真实组件名：

const cachedViews = computed(() => {
  const views = []
  tabs.value.forEach(tab => {
    if (tab.meta?.cache) {
      const component = router.getRoutes().find(r => r.name === tab.name)?.components?.default
      if (component && component.name) {
        views.push(component.name)
      }
    }
  })
  return views
})

这个方法绕开了路由名，直接从路由记录里拿到组件定义，取它的 name。不过前提是组件都定义了 name，否则还是推不进去。

还有一种更彻底的，就是不依赖 include，自己维护一个组件实例的映射。代码大概是这样：

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const activeComponent = ref(null)
const cachedComponents = ref({})

const loadComponent = (routeName) => {
  if (cachedComponents.value[routeName]) {
    activeComponent.value = cachedComponents.value[routeName]
    return
  }
  
  const route = router.getRoutes().find(r => r.name === routeName)
  if (route) {
    const component = route.components.default
    cachedComponents.value[routeName] = component
    activeComponent.value = component
  }
}
</script>

<template>
  <component :is="activeComponent" v-if="activeComponent" />
</template>

这种方式自己控制缓存哪个组件定义，比较灵活，但得自己处理好清理逻辑，否则切得多了内存会一直涨。一般在标签页关闭的时候把对应的 cachedComponents 删掉就好。

实际用的那一套，是把命名统一，配上 meta.cache 标记，缓存范围很明确。key 也改成了路由路径拼接参数，避免了同名组件的冲突。

还有几个平时容易忽视的点：别只拿路由名当缓存 key，路径+参数会更可靠；标签页数量最好设个上限，超过十几个就把最早关掉的页面实例清掉，免得内存慢慢撑爆；至于怎么知道缓存到底生效没有，直接用 Vue Devtools 看组件有没有被 keep-alive 包着，有没有保留状态，比打日志直观。

这事儿本身不复杂，但几个点凑在一起就容易绕进去。记录一下，下回再碰见起码能少走点弯路。