Vue3中如何基于路由元信息实现动态布局加载？

问题核心原因 #

你遇到的问题主要是动态组件未正确关联布局组件实例，或是未正确获取路由元信息中的布局配置。下面直接给出两种可行的解决方案，按需选择即可。

方案一：动态导入布局组件（推荐，无需全局注册） #

这种方式更灵活，适合多布局场景，不需要提前全局注册所有布局组件。

1. 修改 App.vue 代码 #

<template>
  <!-- 用动态组件包裹路由视图，布局组件的slot会渲染页面内容 -->
  <component :is="currentLayout">
    <router-view />
  </component>
</template>

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

const router = useRouter()

// 计算属性动态获取并导入对应布局组件
const currentLayout = computed(() => {
  // 优先取路由meta指定的布局，无指定则用默认布局
  const layoutName = router.currentRoute.value.meta.layout || 'DefaultLayout'
  // 注意：路径要和你的布局文件存放位置一致，比如放在layouts文件夹下
  return defineAsyncComponent(() => import(`./layouts/${layoutName}.vue`))
})
</script>

2. 新增默认布局（可选） #

如果有些路由不需要指定布局，可以创建一个 DefaultLayout.vue 作为兜底：

<template>
  <div>
    <slot /> <!-- 直接渲染页面内容 -->
  </div>
</template>

方案二：全局注册布局组件 #

如果布局数量不多，也可以提前全局注册布局组件，直接用组件名字符串作为动态组件的标识。

1. 在 main.js 中全局注册布局组件 #

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// 导入你的布局组件
import AppLayoutDashboard from './layouts/AppLayoutDashboard.vue'

const app = createApp(App)
// 全局注册组件，名称要和路由meta中的layout值一致
app.component('AppLayoutDashboard', AppLayoutDashboard)

app.use(router).mount('#app')

2. 修改 App.vue 代码 #

<template>
  <component :is="currentLayout">
    <router-view />
  </component>
</template>

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

const router = useRouter()

// 直接返回路由meta中的布局组件名（已全局注册）
const currentLayout = computed(() => {
  return router.currentRoute.value.meta.layout || 'DefaultLayout'
})
</script>

关键注意事项 #

• 确保路由 meta.layout 的值和布局组件的文件名/全局注册名完全匹配（注意大小写，部分系统文件路径区分大小写）
• 所有布局组件必须包含 <slot> 标签，否则页面内容无法渲染
• 如果使用动态导入，要保证布局文件的路径正确，比如你的 AppLayoutDashboard.vue 确实在 src/layouts 目录下

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