Vue 3动态布局组件实现失败：现有代码无法运行，求排查遗漏点

你的核心问题出在路由meta里的layout值类型不匹配：你在路由配置里写的是字符串'SimpleLayout'，但在组件里导入的是SimpleLayout这个组件对象，两者无法匹配，所以计算属性layout始终返回的是DefaultLayout。

另外注意你的路由代码里重复写了props: true，虽然不影响功能，但建议删掉其中一个，保持代码整洁。

修复方案一：直接在路由meta中使用组件对象 #

修改路由配置，先导入SimpleLayout，然后把meta里的layout设为该组件：

import SimpleLayout from "@/layouts/Simple.vue";
import TermsAndConditions from "@/path/to/TermsAndConditions.vue"; // 确保组件路径正确

{
  path: '/terms-and-conditions/:slug',
  name: 'TermsAndConditions',
  component: TermsAndConditions,
  props: true,
  meta: { layout: SimpleLayout } // 这里用组件对象，不是字符串
},

修复方案二：创建组件映射表（更适合多布局场景） #

如果需要用字符串标识布局，可以创建一个映射表，把字符串和组件对象对应起来：

<script setup>
import DefaultLayout from "@/components/wrappers/SiteWrapper.vue";
import SimpleLayout from "@/layouts/Simple.vue"
import { useRoute } from 'vue-router';
import { computed } from 'vue';

// 定义布局映射表
const layoutMap = {
  SimpleLayout,
  DefaultLayout
};

const route = useRoute();
const layout = computed(() => {
  // 从映射表中取对应组件，默认用DefaultLayout
  return layoutMap[route.meta.layout] || DefaultLayout;
});
</script>

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

这种方式在布局较多时更易维护，路由配置里的meta: { layout: 'SimpleLayout' }可以保持不变。

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