文档章节

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

p
 peakedness丶
发布于 11/09 21:18
字数 636
阅读 13
收藏 2

组件是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={//前端全栈开发交流学习圈:866109386  
  name:name,//帮助1-3年前端人员,提神技术思维  
  component:myComponent  
}  

2、使用import导入组件,直接将组件赋值给componet

var name = 'system';  
var route={//前端全栈开发交流学习圈:866109386  
  name:name,//帮助1-3年前端人员,提神技术思维  
  component :() => import('../components/' + name + '.vue');  
}  

3、使用require 导入组件,可以获取到组件

var name = 'system';  
var myComponent = resolve => require.ensure(\[\], () => resolve(require('../components/' + name + '.vue')));  
var route={//前端全栈开发交流学习圈:866109386  
  name:name,//帮助1-3年前端人员,提神技术思维  
  component:myComponent  
}  

4、使用require 导入组件,直接将组件赋值给componet

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

以上所述就是是给大家介绍的Vue加载组件、动态加载组件的几种方式,希望对大家有所帮助。

© 著作权归作者所有

共有 人打赏支持
p
粉丝 19
博文 55
码字总数 56671
作品 0
长沙
私信 提问
加载中

评论(1)

玻璃樽1
新人福利:还有几天了,8000人团!第一大团!!对于新人阿里云真的是下血本了,建议阿里云新人一定一定一定不要错过。 ** 划重点了: ** 1核2G云服务器1年仅需99.5元!!! 1核2G云服务器3年仅需298.50元!!!** 该折扣仅限新人!
这是我的拼团团队地址:https://m.aliyun.com/act/team1111/#/share?params=N.EN2hxhpNQG.34ljy3ay
使用Webpack的代码分离实现Vue的懒加载(译文)

当一个Vue的项目体积变得十分庞大的时候,使用Webpack的代码分离功能将,或的代码进行分离并按需加载,会极大的提高App的首屏加载速度。 在Vue的项目中,我们可以在三种不同的情况下使用懒加...

Lee_tanghui
08/05
0
0
使用Webpack的代码分离实现Vue懒加载(译文)

当一个Vue的项目体积变得十分庞大的时候,使用Webpack的代码分离功能将,或的代码进行分离并按需加载,会极大的提高App的首屏加载速度。 image_1ck53hs7oe40usv1ria21scqm9.png-576.8kB 在V...

大灰狼的小绵羊哥哥
10/11
0
0
基于Vue的SPA如何优化页面加载速度

常见的几种SPA优化方式 减小入口文件体积 静态资源本地缓存 开启GZip压缩 使用SSR ..... 减小入口文件体积,常用的手段是路由懒加载,开启路由懒加载之后,待请求的页面会单独打包js文件,使...

吴空
06/10
0
0
Vuejs2.0开发仿QQ音乐webpp案例分析

仿QQ音乐webapp是基于Vue2.0,vuex,vue-router,axios和html5的flexible box布局与及css3的transform,animation,transition组成。Vuejs是一套MVVM框架,主要注重于view层,实现数据双向绑...

大灰狼的小绵羊哥哥
09/12
0
0
Vue异步组件处理路由组件加载状态

问题场景 在大型单页面应用中,处于对性能的考虑和首屏加载速度的要求,我们一般都会使用webpack的代码分割和vue-router的路由懒加载功能将我们的代码分成一个个模块,并且只在需要的时候才从...

fisher-zh
09/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

在ubuntu下选择crontab计划任务的编辑器

在ubuntu下,首次编辑crontab计划任务的时候,会提示让选择编辑器。由于对nano编辑器不是很熟悉,若是选择nova编辑的话,会有些麻烦。 可以重置编辑器,方法如下: [root@wang ~]# select-...

季书歌
33分钟前
4
0
在线BASE64加密解密、UrlEncode编码/解码、native/ascii在线转换工具 -toolfk程序员工具网

本文要推荐的[ToolFk]是一款程序员经常使用的线上免费测试工具箱,ToolFk 特色是专注于程序员日常的开发工具,不用安装任何软件,只要把内容贴上按一个执行按钮,就能获取到想要的内容结果。T...

toolfk
33分钟前
1
0
laravel命令

https://blog.csdn.net/aaroun/article/details/79140618

vio小黑
34分钟前
3
0
记录一个vue directive实现点击指令外部区域调用函数的方案

根据directive提供的API来写一个点击外部区域可以让其下拉列表消失的菜单 <div id="app" v-clock> <div class="main" v-clickoutside="handleClose"> <button @click="show = !show">点......

呵呵闯
38分钟前
3
0
Oracle一列的多行数据拼成一行显示字符

Oracle一列的多行数据拼成一行显示字符 oracle 提供了两个函数WMSYS.WM_CONCAT 和 ListAgg函数。 先介绍:WMSYS.WM_CONCAT 例: id name 1 aa 2 bb 3 cc 要的结果是"aa,bb,cc" select WMSYS...

voole
38分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部