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

动态加载组件的四种方式：1、使用import导入组件，可以获取到组件123456varname = 'system';varmyComponent =() => import('../components/'+ name + '.vue');varroute={name:name,component:myComponent}2、使用i...

Alan啦啦啦~

3839人浏览 · 2022-01-27 23:18:13

Alan啦啦啦~ · 2022-01-27 23:18:13 发布

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

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

var name = 'system';

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

var route={

name:name,

component:myComponent

}

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

var name = 'system';

var route={

name:name,

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

}

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

var name = 'system';

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

var route={

name:name,

component:myComponent

}

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

var name = 'system';

var route={

name:name,

component(resolve) {

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

}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^