Vue 动态加载组件方式整理

一、在使用VueCLI开发时推荐使用import

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');
}

 

二、在浏览器端开发时推荐使用require

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)
    }
}

 

三、组织要路由元数据后，使用addRoutes（） 方法添加路由元数组到路由系统

  created: function() {
var _this = this;

var list = [2, 3];
var routes = [];
for (var i = 0; i < list.length; i++) {
var index = list[i];
      (function(item) {
var comp = import("./views/Form" + item + ".vue");
routes.push({
path: "/form" + item,
name: "form" + item,
component: () => comp
        });
      })(index);
    }
_this.$router.addRoutes(routes);
  },