文档章节

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

p
 peakedness丶
发布于 2018/11/09 21:18
字数 636
阅读 48
收藏 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
粉丝 50
博文 126
码字总数 168578
作品 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
2018/08/05
0
0
使用Webpack的代码分离实现Vue懒加载(译文)

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

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

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

吴空
2018/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层,实现数据双向绑...

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

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

fisher-zh
2018/09/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

使用 top instance 命令查看运行中 MaxCompute 作业

我们都知道,在 MaxCompute Console 里,可以使用下面的命令来列出运行完成的 instance 列表。 show p|proc|processlist [from <yyyy-MM-dd>] [to <yyyy-MM-dd>] [-p <project>] [-limit <nu......

阿里云云栖社区
6分钟前
0
0
PostgreSQL SSL证书生成与启用

ref: https://yq.aliyun.com/articles/14965

YuanyuanL
8分钟前
1
0
了解 BFC

概念 MDN中的定义 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。 具有 BF...

小草先森
9分钟前
1
0
使用MaxCompute Java SDK 执行任务卡住了,怎么办?

场景一 用户A A: “亲,用 MaxCompute Java SDK 跑作业,为什么卡住不动了?” me: “有 Logview 吗?发来看下” A: “没有,我用的是SDK,没Logview” 场景二 用户B B :“亲,用 MaxCompu...

阿里云官方博客
18分钟前
1
0
使用Ant Design 和Vue,React中后台开发套餐

前言 目前Ant Design 提供 React 和 Vue 两种整合开发框架,开箱即用的中台前端/设计解决方案,可适合中小公司统一后台开发技术栈,本来只是业务信息系统,不要重复造轮子 AntDesign of Rea...

郭恩洲_OSC博客
25分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部