Vue3+Composition API布局组件注册报错及正确实现咨询

一、修复组件注册报错 #

你遇到的export named 'default'报错，核心原因是Vue3不再提供Vue.default导出，全局组件注册必须基于createApp返回的应用实例操作，正确写法如下：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import DefaultLayout from './layouts/Default.vue'
import PlainLayout from './layouts/Plain.vue'

const app = createApp(App)
// 正确的全局注册方式
app.component('DefaultLayout', DefaultLayout)
app.component('PlainLayout', PlainLayout)

app.mount('#app')

二、完整双布局实现步骤 #

1. 编写布局组件 #

确保两个布局组件通过插槽承载路由页面内容：

• layouts/Default.vue（带头部的完整布局）

<template>
  <div class="default-layout">
    <header>应用头部导航</header>
    <main class="content">
      <slot></slot>
    </main>
    <footer>应用底部信息</footer>
  </div>
</template>

• layouts/Plain.vue（登录页专用极简布局）

<template>
  <div class="plain-layout">
    <slot></slot>
  </div>
</template>

<style scoped>
.plain-layout {
  width: 100vw;
  height: 100vh;
  background-color: #f7f8fa;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

2. 路由配置指定布局 #

在路由元信息中标记对应布局组件名：

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { layout: 'DefaultLayout' }
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
    meta: { layout: 'PlainLayout' }
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

3. App.vue动态渲染布局 #

通过计算属性获取当前路由布局，用动态组件包裹路由视图：

<template>
  <component :is="currentLayout">
    <RouterView />
  </component>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
// 若路由未指定布局，默认使用DefaultLayout
const currentLayout = computed(() => route.meta.layout || 'DefaultLayout')
</script>

三、可选优化方案（无需全局注册） #

如果不想全局注册布局组件，可在App.vue中局部导入并映射使用：

<template>
  <component :is="currentLayout">
    <RouterView />
  </component>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import DefaultLayout from './layouts/Default.vue'
import PlainLayout from './layouts/Plain.vue'

const route = useRoute()
const layoutMap = {
  DefaultLayout,
  PlainLayout
}
const currentLayout = computed(() => layoutMap[route.meta.layout as keyof typeof layoutMap] || DefaultLayout)
</script>

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