Vue 动态加载组件方式整理

2019独角兽企业重金招聘Python工程师标准>>>

一、在使用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);
  },

 

更多：

Vue中路由管理器Vue Router使用介绍（三）

Vue中路由管理器Vue Router使用方式（二）-推荐

Vue中路由管理器Vue Router使用方式（一）

 

转载于:https://my.oschina.net/tianma3798/blog/3010097