Vue3中切换路由（动态布局）时如何避免视图重渲染？

问题现象 #

从使用MainLayout的页面导航至使用CallLayout的页面时，Call视图组件会发生不必要的重渲染，控制台日志显示Call组件的初始化代码多次执行。

相关代码 #

AppLayout.vue #

<script lang="ts" setup>
import { markRaw, shallowRef, watch } from 'vue';
import { useRoute } from 'vue-router';
import DefaultLayout from '@/layouts/DefaultLayout.vue';

const layout = shallowRef();
const route = useRoute();

watch(layout, () => console.log('%c Layout has been changed', 'color: aqua'));

watch(
  () => route.meta?.layout,
  async (metaLayout) => {
    console.log('%c Updating layout', 'color: aqua');
    try {
      const component = 
        metaLayout && (await import(/* @vite-ignore */ `./${metaLayout}.vue`));
      layout.value = markRaw(component?.default || DefaultLayout);
    } catch (error) {
      layout.value = markRaw(DefaultLayout);
    }
  }
);
</script>

<template>
  <Component :is="layout">
    <slot />
  </Component>
</template>

Call.vue #

<script lang="ts" setup>
console.log('Render Call component');
</script>

<template>
  <p>Call component</p>
</template>

控制台日志 #

输出顺序如下：

1. 青色字体的Updating layout
2. 青色字体的Layout has been changed
3. Render Call component

问题原因 #

路由切换时，AppLayout中的layout引用发生变更，<Component :is="layout">会销毁旧布局组件并创建新的布局实例。由于Call组件作为布局的插槽内容存在，布局的销毁重建会触发插槽内所有子组件的卸载与重新挂载，最终导致Call组件重渲染。

解决方案 #

方案1：用<KeepAlive>缓存页面组件（推荐） #

在路由出口处用<KeepAlive>包裹页面组件，确保页面组件在路由/布局切换时保持挂载状态，避免重渲染：

<!-- 路由出口所在组件（如App.vue） -->
<template>
  <AppLayout>
    <RouterView v-slot="{ Component }">
      <KeepAlive>
        <Component :is="Component" />
      </KeepAlive>
    </RouterView>
  </AppLayout>
</template>

方案2：解耦布局与页面组件的挂载上下文 #

修改AppLayout的结构，使用稳定的根节点包裹布局组件，减少布局切换对插槽内容的影响：

<!-- 修改后的AppLayout.vue -->
<script lang="ts" setup>
// 原有逻辑保持不变
</script>

<template>
  <div class="layout-container">
    <Component :is="layout">
      <slot />
    </Component>
  </div>
</template>

该方案效果有限，仅适合部分场景，优先选用方案1。

内容的提问来源于stack exchange，提问作者Vlad Susidko