Vue3动态组件名称解析异常，求助排查问题原因

问题出在你给layout赋值的是字符串名称，但Vue的动态组件:is需要接收的是组件对象，而非字符串。你import的DashboardLayout和AuthLayout是组件对象，但watch逻辑里把layout.value设成了字符串"DashboardLayout"，Vue无法识别这个字符串对应的组件，就把它当作普通自定义标签渲染，所以出现了<dashboardlayout>。

修复步骤： #

1. 先创建组件映射表，把字符串名称和对应的组件对象关联起来：

<template>
  <component :is="layout" />
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useRouter } from "vue-router";
import DashboardLayout from "./layouts/DashboardLayout.vue";
import AuthLayout from "./layouts/AuthLayout.vue";

// 新增：组件映射表，建立字符串与组件对象的对应关系
const layoutMap = {
  DashboardLayout,
  AuthLayout
};

const router = useRouter();
// 给layout设置初始组件，避免页面加载时为空
const layout = ref(DashboardLayout);

watch(
  () => router.currentRoute.value,
  (to) => {
    // 从映射表中获取对应的组件对象
    const targetLayout = to.meta.layout || "DashboardLayout";
    layout.value = layoutMap[targetLayout];
  }
);
</script>

2. 确保路由配置里的meta.layout是映射表中存在的字符串，示例如下：

// 路由配置示例
const routes = [
  {
    path: "/dashboard",
    component: () => import("./views/Dashboard.vue"),
    meta: { layout: "DashboardLayout" }
  },
  {
    path: "/login",
    component: () => import("./views/Login.vue"),
    meta: { layout: "AuthLayout" }
  }
];

修改后，动态组件就能正确识别并渲染对应的布局组件了。

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