时间戳

首页 > 解决方案 > Vue 3：使用组合 API 正确实现动态布局渲染

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

问题描述

我正在尝试实现一种生成根据我的路由元设置更改的动态布局组件的好方法（如果路由有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但都没有获得工作结果。你有什么建议吗？

标签： vue.jsvue-routervue-composition-api

解决方案

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

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

PS 别介意语法。我正在使用打字稿。

推荐阅读