Vue 动态加载组件方式整理

最新推荐文章于 2024-07-30 23:19:55 发布

转载最新推荐文章于 2024-07-30 23:19:55 发布 · 529 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/tianma3798/blog/3010097

文章标签：

#javascript #python #ViewUI

本文详细介绍在Vue项目中如何根据不同场景使用import和require进行组件的按需加载，包括VueCLI开发环境和浏览器端的最佳实践。同时，文章还介绍了如何通过addRoutes方法动态添加路由，实现更灵活的路由管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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