Vue JS 2 如何在两个父组件跳转时避免重复加载同一嵌套组件

问题原因分析 #

你之前使用<keep-alive>失效的核心原因通常是以下三类：

• 你在两个不同布局组件中分别写了Menu组件的引入声明，这两个是完全独立的组件实例，<keep-alive>只能缓存同一个挂载点下的组件切换，跨挂载点的实例无法共享缓存
• 被缓存的组件没有显式声明name属性，<keep-alive>的include/exclude属性无法正确匹配目标组件
• <keep-alive>的放置层级错误：你把包裹Menu的<keep-alive>写在了布局组件内部，切换父布局时整个布局实例销毁，<keep-alive>本身也被销毁，缓存自然失效

解决方案 #

方案1：调整组件结构复用同一实例（优先推荐） #

这是成本最低、无副作用的最优方案，操作逻辑如下：

1. 把Menu组件从两个子布局中抽离，放到更高层级的公共父组件中（比如App.vue、路由根布局组件）
2. 两个子布局仅保留差异化内容，通过<router-view>或插槽渲染在Menu的相邻位置
   示例代码结构：

<!-- 公共父级组件 App.vue -->
<template>
  <!-- 全局仅声明一次Menu，切换布局时不会被销毁 -->
  <Menu />
  <!-- 两个子布局的内容在这里切换 -->
  <router-view />
</template>

调整后Menu全程是同一个实例，不会重复渲染，滚动位置会自然保留。

方案2：无法调整结构时的兼容实现 #

如果业务逻辑不允许调整组件层级，可选择以下两种实现方式：

方式A：持久化状态+滚动位置恢复

用全局状态管理存储Menu的滚动位置，组件挂载时自动恢复：

1. 给Menu组件显式声明name属性，示例：name: 'CommonMenu'
2. 用Pinia/Vuex存储Menu的滚动位置，组件卸载前保存位置，挂载时恢复
   示例代码：

<!-- Menu组件内部代码 -->
<script setup>
import { useMenuStore } from '@/stores/menu'
const menuStore = useMenuStore()
// 绑定Menu滚动容器的ref
const menuContainer = ref()

// 组件挂载时恢复滚动位置
onMounted(() => {
  menuContainer.value.scrollTop = menuStore.menuScrollTop
})
// 组件卸载前保存当前滚动位置
onBeforeUnmount(() => {
  menuStore.setMenuScrollTop(menuContainer.value.scrollTop)
})
</script>

<template>
  <div ref="menuContainer" class="menu-wrapper">
    <!-- Menu的原有内容 -->
  </div>
</template>

方式B：Teleport+全局缓存复用单实例

在公共父级缓存一个Menu实例，两个布局用Teleport挂载同一个实例，保证全程复用：

<!-- 公共父级 App.vue -->
<template>
  <!-- 全局缓存唯一的Menu实例 -->
  <div v-show="false">
    <keep-alive>
      <Menu />
    </keep-alive>
  </div>
  <router-view />
</template>

<!-- Menu组件内部 -->
<template>
  <Teleport to=".menu-mount-point">
    <div class="menu-wrapper">
      <!-- Menu原有内容 -->
    </div>
  </Teleport>
</template>

<!-- 两个布局组件内都预留挂载节点 -->
<div class="menu-mount-point"></div>

内容的提问来源于stack exchange，提问作者Marat Gabitov