当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue加载组件、动态加载组件的几种方式

Vue加载组件、动态加载组件的几种方式

2018年09月21日  | 移动技术网IT编程  | 我要评论

网游之紫风传奇,顺德人事局,鬼吹灯之精绝古城19-21下载

什么是组件：

组件是vue.js最强大的功能之一。组件可以扩展html元素，封装可重用的代码。在较高层面上，组件是自定义的元素，vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生html元素的形式，以is特性扩展。

下面一段简单的代码给大家介绍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)
  }
}

总结

以上所述是小编给大家介绍的vue加载组件、动态加载组件的几种方式，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网