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

 更新时间:2018年08月31日 11:34:33   作者:楼兰之幻  
组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。这篇文章通过实例代码给大家介绍了Vue加载组件、动态加载组件的几种方式,需要的朋友参考下吧

什么是组件:

组件是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加载组件、动态加载组件的几种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Ant Design Vue table中列超长显示...并加提示语的实例

    Ant Design Vue table中列超长显示...并加提示语的实例

    这篇文章主要介绍了Ant Design Vue table中列超长显示...并加提示语的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue.js从安装到搭建过程详解

    vue.js从安装到搭建过程详解

    这篇文章主要为大家详细介绍了vuejs从安装到搭建的整个过程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 详解vue中axios的使用与封装

    详解vue中axios的使用与封装

    这篇文章主要介绍了vue中axios的使用与封装,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • 解决父组件将子组件作为弹窗调用只执行一次created的问题

    解决父组件将子组件作为弹窗调用只执行一次created的问题

    这篇文章主要介绍了解决父组件将子组件作为弹窗调用只执行一次created的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 在vue中给列表中的奇数行添加class的实现方法

    在vue中给列表中的奇数行添加class的实现方法

    今天小编就为大家分享一篇在vue中给列表中的奇数行添加class的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue组件通信入门之Provide和Inject机制

    Vue组件通信入门之Provide和Inject机制

    这篇文章主要给大家介绍了关于Vue组件通信入门之Provide和Inject机制的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue组件通信具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-12-12
  • 在Vue中是如何封装axios

    在Vue中是如何封装axios

    这篇文章主要介绍在Vue中是如何封装axios的相关资料,axios的封装主要是帮助我们简化代码和利于后期的更新维护,感兴趣的小伙伴可以和小编一起来阅读下面文章的具体内容
    2021-10-10
  • vue实现移动端拖动排序

    vue实现移动端拖动排序

    这篇文章主要为大家详细介绍了vue实现移动端拖动排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • vue-cli开发时,关于ajax跨域的解决方法(推荐)

    vue-cli开发时,关于ajax跨域的解决方法(推荐)

    下面小编就为大家分享一篇vue-cli开发时,关于ajax跨域的解决方法(推荐),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 使用jenkins一键打包发布vue项目的实现

    使用jenkins一键打包发布vue项目的实现

    这篇文章主要介绍了使用jenkins一键打包发布vue项目的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05

最新评论