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

相关文章

  • vue3 学习笔记之axios的使用变化总结

    vue3 学习笔记之axios的使用变化总结

    本篇文章主要旨在帮助正在学vue3或者准备学vue3的同学了解网络请求axios该如何使用,防止接触了一点点vue3的同学会有个疑问。有兴趣的小伙伴可以关注一下
    2021-11-11
  • vue3安装vant实现按需引入和全局引入

    vue3安装vant实现按需引入和全局引入

    本文主要介绍了vue3安装vant实现按需引入和全局引入,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue-manage-system升级到vue3的开发总结分析

    vue-manage-system升级到vue3的开发总结分析

    这篇文章主要为大家介绍了vue-manage-system升级到vue3的开发总结分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Vue3+ElementPlus封装图片空间组件的门面实例

    Vue3+ElementPlus封装图片空间组件的门面实例

    图片空间是用于管理上传图片的工具,可以让用户方便地存储、管理和调用图片,提高工作效率,它通常具备多样的样式,但操作入口统一,便于使用,通过图片空间组件,用户能直接在其他模块(例如商品图片)中选择所需图片
    2024-09-09
  • 关于Element-ui中el-table出现的表格错位问题解决

    关于Element-ui中el-table出现的表格错位问题解决

    使用ElementUI的el-table后,偶然发现出现行列错位、对不齐问题,下面这篇文章主要给大家介绍了关于Element-ui中el-table出现的表格错位问题解决的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • vue+elementUI显示表格指定列合计数据方式

    vue+elementUI显示表格指定列合计数据方式

    这篇文章主要介绍了vue+elementUI显示表格指定列合计数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 解决vant中 tab栏遇到的坑 van-tabs

    解决vant中 tab栏遇到的坑 van-tabs

    这篇文章主要介绍了解决vant中 tab栏遇到的坑 van-tabs,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue实现定位并解决内存泄漏

    Vue实现定位并解决内存泄漏

    Vue.js 是一个流行且强大的 JavaScript 框架,它允许我们构建动态和交互式 Web 应用程序,本文我们将深入探讨 Vue.js 应用程序中内存泄漏的原因,并探索如何定位和修复这些问题的有效策略,希望对大家有所帮助
    2023-09-09
  • vue3在table里使用elementUI的form表单验证的示例代码

    vue3在table里使用elementUI的form表单验证的示例代码

    这篇文章主要介绍了vue3在table里使用elementUI的form表单验证的示例代码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-12-12
  • mpvue小程序仿qq左滑置顶删除组件

    mpvue小程序仿qq左滑置顶删除组件

    最近在做小程序开发的时候,遇到了点问题。最终选择用mpvue来做,谁知这么多坑,下面小编把我遇到的问题分享给大家,如果大家对mpvue小程序仿qq左滑置顶删除组件相关知识感兴趣的朋友一起看看吧
    2018-08-08

最新评论