Vue 3：使用组合 API 正确实现动态布局渲染

Question

我正在尝试实现一种生成动态布局组件的好方法，这些组件会根据我的路由元设置而变化（如果路由有 meta: { layout: 'LayoutName' }，它应该加载该布局，否则它会加载默认布局 MainLayout.vue） .

经过大量尝试和错误我设法让它工作：

// My main App.vue file
<template>
    <component :is="layout">
        <router-view />
    </component>
</template>

<script setup>

import { defineAsyncComponent, computed } from 'vue'
import { useRoute } from 'vue-router';

let layout = computed( () => { 
        const { meta } = useRoute()
        return defineAsyncComponent( () => import(`./layouts/${meta.layout ?? 'MainLayout'}.vue`) )
    }
)

我的问题是：这种混合computed 和defineAsyncComponent 的方式是否可取？

我尝试使用watch 和watchEffect，但没有获得工作结果。你有什么建议吗？

Answer 1

兄弟，由于 webpack 导入无法计算 meta.layout，因此计算对你不起作用？？并进行导入。 要解决此问题，请为布局创建一个单独的变量。类似的东西：

layout(): ILayout {
  const { meta } = useRoute();
  const layoutName: TLayout = meta.layout ?? 'DefaultLayout';
  return defineAsyncComponent(
    () =>
      import(/* webpackChunkName: 'Layout' */ `@/layouts/${layoutName}.vue`)
  );
}

附：别管语法。我正在使用打字稿。