Vue动态加载组件

摘要:使用import导入组件,可以获取到组件;使用import导入组件,直接将组件赋值给componet;使用require 导入组件,可以获取到组件;使用require 导入组件,直接将组件赋值给componet

1、使用import导入组件,可以获取到组件

var name = 'xxxx';
var xxComponent =() => import('../components/' + name + '.vue');
var route={
    name:name,
    component:xxComponent
}


2、使用import导入组件,直接将组件赋值给componet

var name = 'xxxx';
var route={
    name:name,
    component :() => import('../components/' + name + '.vue');
}


3、使用require 导入组件,可以获取到组件

var name = 'xxxx';
var xxComponent = resolve => require.ensure([], () => resolve(require('../components/' + name + '.vue')));
var route={
    name:name,
    component:xxComponent
}


4、使用require 导入组件,直接将组件赋值给componet

var name = 'xxxx';
var route={
    name:name,
    component(res) {
        require(['../components/' + name + '.vue'], res)
    }
}

 

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_5845