feat: 异步动态加载组件

src/router/modules/demo.ts

@@ -126,6 +126,10 @@ const titleArr = [
         key: 'dataSafe',
         title: '数据安全-加密解密与掩码',
     },
+    {
+        key: 'asyncDynComp',
+        title: '异步动态加载组件',
+    },
 ];
 
 // @/views/demo/**/*.vue

src/views/demo/asyncDynComp/components/header.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="p-5 space-y-5 !bg-gray-100">
+        <el-card header="我是头部"> </el-card>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+</script>
+
+<style lang="scss" scoped></style>

src/views/demo/asyncDynComp/index.vue

@@ -0,0 +1,111 @@
+<template>
+    <div v-loading="loading">
+        <div class="p-5">
+            <el-button
+                type="primary"
+                @click="changeModuleAStep('000')"
+                >切换模块A到步骤000</el-button
+            >
+            <el-button
+                type="primary"
+                @click="changeModuleAStep('001')"
+                >切换模块A到步骤001</el-button
+            >
+            <el-button
+                type="primary"
+                @click="changeModuleAStep('002')"
+                >切换模块A到步骤002</el-button
+            >
+        </div>
+        <div
+            v-for="(item, index) in allComponents"
+            :key="index"
+        >
+            <component :is="item.component"></component>
+        </div>
+    </div>
+</template>
+
+<script>
+import { defineAsyncComponent } from 'vue';
+import { moduleAComponents } from './moduleA/index';
+
+export default {
+    name: 'AsyncDynComp',
+    components: {
+        myHeader: defineAsyncComponent(() => import('./components/header.vue')),
+
+        // moduleA
+        item1: defineAsyncComponent(() => import('./moduleA/item1.vue')),
+        item2: defineAsyncComponent(() => import('./moduleA/item2.vue')),
+    },
+    data() {
+        return {
+            loading: false,
+            currentModule: 'moduleA',
+            product: {
+                moduleA: moduleAComponents,
+                // moduleB 相同的操作就不重复实现了
+            },
+            /**
+             * 000 初始阶段，只显示myHeader组件
+             * 001 显示到moduleA-item1
+             * 002 显示到moduleA-item2
+             * 注意这里的moduleAStep是根据接口返回值来改变的，渲染组件是由computed计算属性的allComponents来决定
+             */
+            moduleAStep: '000',
+        };
+    },
+    computed: {
+        allComponents() {
+            let components = [];
+
+            components = this.getComponentsWithStep;
+            this.addHeader(components);
+            // this.addFooter(components); 相同的操作就不重复实现了
+            return components;
+        },
+        getComponentsWithStep() {
+            let components = [];
+            switch (this.currentModule) {
+                case 'moduleA':
+                    // moduleA这里作为示例，根据moduleAStep来动态加载不同的组件
+                    switch (this.moduleAStep) {
+                        case '000':
+                            break;
+                        case '001':
+                            components = this.product.moduleA.slice(0, 1);
+                            break;
+                        case '002':
+                            components = this.product.moduleA.slice(0, 2);
+                            break;
+                    }
+                    break;
+                default:
+                    // 默认都直接获取当前模块下index里面的配置组件
+                    components = JSON.parse(JSON.stringify(this.product[this.currentModule]));
+                    break;
+            }
+            return components;
+        },
+    },
+    methods: {
+        addHeader(components) {
+            components.unshift({
+                component: 'myHeader',
+                name: 'myHeader',
+                title: '我是公共头部',
+            });
+        },
+        changeModuleAStep(step) {
+            this.loading = true;
+            setTimeout(() => {
+                this.moduleAStep = step;
+                this.loading = false;
+            }, 1000);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/demo/asyncDynComp/moduleA/index.js

@@ -0,0 +1,12 @@
+export const moduleAComponents = [
+    {
+        component: 'item1',
+        title: '我是item1的名称',
+        name: 'item1',
+    },
+    {
+        component: 'item2',
+        title: '我是item2的名称',
+        name: 'item2',
+    },
+];

src/views/demo/asyncDynComp/moduleA/item1.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="p-5 space-y-5 !bg-gray-100">
+        <el-card header="我是模块A-item1"> </el-card>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+</script>
+
+<style lang="scss" scoped></style>

src/views/demo/asyncDynComp/moduleA/item2.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="p-5 space-y-5 !bg-gray-100">
+        <el-card header="我是模块A-item2"> </el-card>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+</script>
+
+<style lang="scss" scoped></style>