uniapp 怎么动态按需加载组件

分类：uni-app

uniapp 组件动态加载动态加载组件

比如主页面可能根据权限引入不同的组件显示不同的类容，并不是引入所有的组件再用v-if显示隐藏

this.theme = () => import(./cockpit/${this.toDisplayMgtArr[i].egmList[j].graphicalType}) 这种动态引入在vue项目里面没问题，在uniapp项目没用

2020-08-07 14:48 负责人:无分享

9 个回复

Bocheng

请问您这问题有解决么？怎么解决的呢？

长刀之夜 (作者)

没有

2021-03-04 14:55

5***@qq.com

请问这个问题解决了吗

长刀之夜 (作者)

没有

2021-03-04 14:55

Kytrun

web的按需加载主要原因是减少初次的网络请求，加快速度。但是APP资源都在本地，按需加载有什么必要呢？

长刀之夜 (作者)

按接口需求加载组件

2021-03-04 14:55
superMiao

回复长刀之夜: 找到解决办法了吗我试了几种都不行说是uniapp不支持动态加载组件

2021-07-01 14:15
长刀之夜 (作者)

回复 superMiao: 经过n次试验uniapp不支持

2021-07-06 11:32

L***@163.com

请问现在解决了吗

1***@qq.com

一下方式只使用于h5

<template>  
    <view class="uc-component">  
        <view></view>  
    </view>  
</template>  
<script>  
    import Vue from 'vue'  
    export default {  
        name:"uc-component",  
        props: {  
            name: {  
                type: String,  
                required: true  
            },  
            // 目录  
            directory: {  
                type: String,  
                required: false,  
                default: 'pages'  
            }  
        },  
        mounted(){  
            this.dynamicImport(this.name);  
        },  
        watch:{  
            name(value){  
                this.dynamicImport(value);  
            }  
        },  
        methods:{  
            dynamicImport(fileName) {  
                // #ifdef H5  
                require([`@/pages/${fileName}/${fileName}.vue`],component => {  
                    const Component = Vue.extend(component.default);  
                    new Component().$mount(this.$el.children[0]);  
                });  
                // #endif  
            }  
        }  
    }  
</script>  
使用方式  
<uc-component :name="curPage"></uc-component>