[Vue]动态加载组件的四种方式-CFANZ编程社区

[Vue]动态加载组件的四种方式

ixiaoyang8

阅读 103

2022-01-27

动态加载组件的四种方式：

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

1

2

3

4

5

6

var name = 'system';

var myComponent =() => import('../components/' + name + '.vue');

var route={

name:name,

component:myComponent

}

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

1

2

3

4

5

var name = 'system';

var route={

name:name,

component :() => import('../components/' + name + '.vue');

}

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

1

2

3

4

5

6

var name = 'system';

var myComponent = resolve => require.ensure([], () => resolve(require('../components/' + name + '.vue')));

var route={

name:name,

component:myComponent

}

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

1

2

3

4

5

6

7

var name = 'system';

var route={

name:name,

component(resolve) {

require(['../components/' + name + '.vue'], resolve)

}

}

精彩评论（0）