1. 需求描述

最近开发的一个项目，涉及到这样一个需求：随着项目的不断推进，后台管理功能逐渐增多，与此同时，静态路由表也逐渐扩大，需要把静态路由方式转换为动态路由方式。要完成这样一个转换，有几个技术要点需要解决，其中一个就是需要Vue动态加载组件，那么，Vue动态加载组件的常用方式有哪些呢？

2. Vue动态加载组件的两类方式

Vue加载组件主要有正常加载和懒加载，示例代码如下：

//正常加载
import index from '../pages/index.vue'
import view from '../pages/view.vue'
//懒加载
const index = resolve => require(['../pages/index.vue'], resolve)
const view = resolve => require(['../pages/view.vue'], resolve)
//懒加载 - 按组
const index = r => require.ensure([], () => r(require('../pages/index.vue')), 'group-index')
const view = r => require.ensure([], () => r(require('../pages/view.vue')), 'group-view')
// 懒加载 - 按组 import，基于ES6 import的特性
const index = () => import('../pages/index.vue')
const view = () => import('../pages/view.vue')

组件懒加载指的是在组件需要使用的时候才加载，即下文中指的组件的动态加载，Vue动态加载组件的方式主要有四种：

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

或者

var name = 'system';
var route={name:name,component:(resolve) => require(['../components/' + name + '.vue'], resolve)
}

注意观察以上四种方式，不难发现，四种方式可以归为两类：

2.1 使用import导入组件

如上图所示，红色方框内的，可以写在组件上，当然也可以用一个变量保存，然后直接引用变量。

2.2 使用require导入组件

或者

上2个图中，只是不同的写法形式而已。上图中，红色方框内的，可以写在组件上，当然也可以用一个变量保存，然后直接引用变量。

3. 测试

测试的代码样例，Vue动态加载组件使用import导入组件，截图如下：

测试的代码样例，Vue动态加载组件使用require导入组件，截图如下：

4. 结语

Vue动态加载组件主要有两类方式，即import方式和require方式。这些应该是js方面的基本知识点，本文在此不作展开，仅因为工作需要，顺带记录整理。后续研究JS相关的知识的时候，再做进一步拓展。

5. 参考资源

Vue加载组件、动态加载组件的几种方式
vue实现路由懒加载及组件懒加载的方式

Vue动态加载组件的两类方式（import和require）相关推荐

Vue动态加载组件的四种方式
动态加载组件的四种方式: 1.使用import导入组件,可以获取到组件 var name = 'system'; var myComponent =() => import('../compon ...
vue.js 动态加载 html,Vue加载组件、动态加载组件的几种方式
什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HT ...
vue -- 动态加载组件（tap 栏效果）
在 vue 中,实现 Tab 切换主要有三种方式:使用动态组件,使用 vue-router 路由,使用第三方插件. 因为这次完成的功能只是简单切换组件,再则觉得使用路由切换需要改变地址略微麻烦,所以使 ...
render vue 添加类_详解vue 动态加载并注册组件且通过 render动态创建该组件
基于 iview Tabs 组件实现功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue import loa ...
render注册一个链接组件_详解vue 动态加载并注册组件且通过 render动态创建该组件...
基于 iview Tabs 组件实现功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue import loa ...
踩坑记15 动态路由 router.options.routes未更新 | vue升级 element-plus未适配vue3.2.x | vite glob导入动态加载组件，不能使用别名alias
2021.8.12 坑50(vue-router4.addRoute().router.options.routes未更新):进行动态权限获取菜单的设置,使用了addRoute()来添加路由,但是ro ...
ajax加载vue数据,详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
整理文档,搜刮出一个使用vue.js结合jquery ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 demo {{message }} 测试jqu ...
vue动态加载VueI18n实现国际化
vue动态加载VueI18n实现国际化前言编写后端工程编写前端工程前言前一段时间给大家写了一个基于spring boot和iview的前后端分离架构,当时国际化的语言信息是直接在前端直接事先 ...
vue动态加载js和css以及部分页面加载特定的js和css
vue动态加载js和css以及部分页面加载特定的js和css vue项目第一次加载很慢的,发现在第一次加载要很大的js导致卡顿.可以使用cdn加速和其他gzip方式效果不是很明显.因此考虑每个页面动态 ...
Flex LineChart曲线——动态加载组件
最近在学习Flex 和Asp.net互操作,在网上查找了一些资料,综合后, 做出了这个动态加载组件的LineChart曲线.尚有不足之处请予以指正:谢谢. 下面是完整代码: 代码 1 <?xml ...

Vue动态加载组件的两类方式（import和require）