能否在带插槽的LayoutComponent中用动态组件实现页面复用？

要实现单个LayoutComponent实例承载所有页面组件、无需每个页面嵌套布局的需求，可以通过「布局容器+动态组件/路由视图」的方式实现，核心是让布局作为根容器，动态加载页面内容，而非让页面嵌套布局。以下是两种可行方案：

方案1：结合Vue Router实现路由级布局嵌套（推荐） #

利用Vue Router的嵌套路由特性，将LayoutComponent作为父路由的组件，所有页面组件作为子路由，路由会自动将页面渲染到布局的<router-view>位置，页面组件无需引入布局。

步骤1：改造LayoutComponent模板 #

将布局的内容区域替换为<router-view>，用于渲染当前匹配的页面组件：

<template>
  <div class="layout-container">
    <!-- 布局头部 -->
    <header class="layout-header">
      <h1>网站通用头部</h1>
    </header>
    <!-- 动态页面内容区域 -->
    <main class="layout-content">
      <router-view />
    </main>
    <!-- 布局底部 -->
    <footer class="layout-footer">
      <p>网站通用底部</p>
    </footer>
  </div>
</template>

<script setup>
// 无需额外逻辑，路由会自动处理页面渲染
</script>

<style scoped>
.layout-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.layout-header, .layout-footer {
  padding: 1rem 2rem;
  background-color: #f0f0f0;
}
.layout-content {
  flex: 1;
  padding: 2rem;
}
</style>

步骤2：配置嵌套路由 #

在路由配置文件中，将LayoutComponent设为根路由的组件，页面组件作为子路由：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import LayoutComponent from '@/components/LayoutComponent.vue'
import HomePage from '@/pages/HomePage.vue'
import AboutPage from '@/pages/AboutPage.vue'
import ContactPage from '@/pages/ContactPage.vue'

const routes = [
  {
    path: '/',
    component: LayoutComponent,
    // 所有子路由都会渲染到Layout的router-view中
    children: [
      { path: '', component: HomePage },
      { path: 'about', component: AboutPage },
      { path: 'contact', component: ContactPage }
    ]
  }
]

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

export default router

方案2：结合状态管理（Pinia/Vuex）手动切换页面组件 #

如果不使用路由，可以通过全局状态管理控制当前加载的页面组件，在LayoutComponent中用<component :is="currentPage">动态渲染。

步骤1：创建页面状态仓库 #

以Pinia为例，定义存储当前页面组件的状态和切换方法：

// stores/pageStore.js
import { defineStore } from 'pinia'
import HomePage from '@/pages/HomePage.vue'
import AboutPage from '@/pages/AboutPage.vue'

export const usePageStore = defineStore('page', {
  state: () => ({
    // 默认加载首页
    currentPage: HomePage
  }),
  actions: {
    setPage(component) {
      this.currentPage = component
    }
  }
})

步骤2：改造LayoutComponent使用动态组件 #

在布局中引入状态仓库，通过<component>渲染当前页面，并添加切换按钮：

<template>
  <div class="layout-container">
    <header class="layout-header">
      <button @click="switchPage('home')">首页</button>
      <button @click="switchPage('about')">关于我们</button>
    </header>
    <main class="layout-content">
      <!-- 动态渲染当前页面组件 -->
      <component :is="currentPage" />
    </main>
    <footer class="layout-footer">网站通用底部</footer>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { usePageStore } from '@/stores/pageStore'
import HomePage from '@/pages/HomePage.vue'
import AboutPage from '@/pages/AboutPage.vue'

const pageStore = usePageStore()
const currentPage = computed(() => pageStore.currentPage)

const switchPage = (type) => {
  pageStore.setPage(type === 'home' ? HomePage : AboutPage)
}
</script>

关键说明 #

• 两种方案都无需在页面组件中嵌套LayoutComponent，所有页面都由同一个Layout实例承载，完全复用布局样式和结构。
• 如果之前用render函数失败，大概率是没有正确绑定组件实例或未处理布局与页面的渲染上下文，上述方案通过Vue官方的动态组件/路由视图特性，避免了手动render的复杂逻辑。

内容的提问来源于stack exchange，提问作者Keerthi Kumar P